Tagged: dropdown, navigation, responsive, select
Good day,
I have 7 links on my Header Navigation – when the browser is shrunk to 1139px, the responsive layout causes my menu items to overlap the Header Logo.
I would like to have the Dropdown Select Navigation to appear at 1139px, instead of the 767px default.
I tried adding a custom @media edit to display the select and hide the unordered list, but it appears that does not help because the select dropdown is not even added to the HTML until the browser is shrink to 767px (or so it appears?)
Please let me know how I can display the select dropdown when the browser-width is 1139px or lower. Thank you :)
I also have this issue. Would love to know an option to solve it.
Hi All,
In the theme files open js>avia.js and look for the following line where you can change that:
switchWidth = 768;
Regards,
Devin
Is there a way to set it so the menu goes under the logo at the point when it crosses over? Then at 768 it changes as normal to the mobile drop-down?
You would need to use a media query and customize the css for the header section. See: http://css-tricks.com/css-media-queries/
The biggest issue would be re-styling the header to fit the change and just making sure it stays cross browser compatible. If we can take a look at the site we can see what we can assist with via css to get you started.
Regards,
Devin
Hey Devin I am having the same problem with the menu intersecting with the Logo.
I can give you my site address can you do that re-styling you were talking about?
http://www.osptest.uoftmsa.com/
Thanks