How to implement adaptive menu in my case?

0 like 0 dislike
4 views
I have the following template: 5ae310910afb9672298033.png

This is the full version of the website. Note the "Menu 1" and "Menu 2"
Menu 1 contains links to the main sections of the website
Menu 2 contains the list of the 13 categories, and is the sidebar to the right

And it looks like the responsive template:
5ae3112d67fac584794338.jpeg

In an adaptive Menu template 1 is transferred to the drop-down list when clicked
and the sidebar moves below the content section, respectively 2 menus in the sidebar too.

Both menus are important for the site. I want the mobile version of the website and the menu 1 and menu 2 would open one list below the logo. How to implement it?

The idea was to duplicate the menu and stick 2 in 1 concealing it in the full version, but in the mobile show and set the styles. But it's an extra duplicate links. As for the promotion of the site will be affected?
by | 4 views

1 Answer

0 like 0 dislike
Question SEO is undoubtedly important in the development of the site, but designers do not always take this into account and similar situations are not uncommon. Probably the best option would be to move the markup in the DOM. In your case with JQuery you can do this by using the appendTo and prependTo, and based on the width of the viewport to move the menu to one, then to another place.
by

Related questions

0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
33,686 users