-
Posts
-
Hi,
Really like the themes – but there seems to still be a few issues with responsiveness on this one.
Main problem I’m still having is with the menu overlapping the content when resizing the browser.
Works well enough on the official Tablet/Mobile settings – but there are a lot of odd screen sizes out there these days & people regularly resize their browser windows – and the menu looks awful when you do.What I’m trying to do is get the menu changing to the mobile version at that point when it starts to overlap – but can’t seem to find the proper selectors.
Code I’m currently trying is:
@media only screen and (max-width: 972px) and (min-width: 800px) {
#nav-toggle {
display: block;
}
#mobile-menu {
display: none;
}
}And variations of, ie. nav#mobile-menu
—
Is the menu done via javascript? Is this the issue?
Would really like to use this theme for students in an intro/intermediate wordpress – both for an Outreach & community college course – just need this one issue sorted.
Any help appreciated.
Thanks,
Ken Macaulay
—PS. Avoided the serious slider responsive issues by using a plugin – shortcode option is very handy.
Website: wordpresscoursessydney.com
I’m bumping this because this one and others like it have not been answered yet and I’m in need lol.
Website: companionbirds.ca
Hi @KenMacauley I went to your site and it looks like you have solved the issue. I am still having problems with menu overlap when the website is not full screen and was curious to see if anyone else has found a solution for that. Right now if screen is not full screen it is virtually useless.
Hi Cody,
Ended up having to make sure the menu was under 800px wide.
Just use drop down’s to get it under 800px for now – until they sort the bug.Ken
I had to resize my site logo a few times but it works now. The logo doesn’t even seem different but it somehow works with mobile now.
Website: companionbirds.ca
There is no magic solution for this situation. The theme (or the browser) doesn’t have a way to guess how long the menu is and switch it to the mobile counterpart at the correct screen width.
We’d also very much like to avoid hogging the theme down with the JavaScript necessary for such detection, so for now the workarounds are to limit the menu’s width to the screen sizes you want to support or to add custom styling to activate the mobile menu earlier.
If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.Hi @Zed, what would be the customer styling that would allow us to activate the mobile menu earlier?
The header area has a fixed height listed (100px) which causes the menu to overlap the content below it, if it bumps to a second line. Also, any sub menu items from the 1st row are layered behind (z-index: -1) the bottom row.
A workaround for this is the following “Additional CSS”:
#site-header-main { height: auto; } #access ul.children { z-index: 1!important; } #access ul ul { z-index: 1!important; }The other option would be to create a media query that kicks in at whatever width your menu bumps to a 2nd row and displays the mobile version of the menu. This width will be different for each site depending on the size of the logo or site title and the number and length of the menu items. If, for example this occurs at a width of 1000px for you, the following media query will switch to the mobile version of the menu at that width:
@media (max-width: 1000px) { .cryout #nav-toggle { display: block; } #masthead.cryout #access { display: none; } }I used the first method you suggested @_Bill_ and it works great! It solves virtually 90 percent of my issue. When the menu switches to two rows however it shows both the drop down from the upper row and the second row menu option, essentially rendering it useless. Although this is much better than it was prior because it still gives the other options functionality they didn’t have before because they were under the second line of the menu.
Is there any way to give the drop downs from row 1 priority over row two, so that they cover up the second row when hovered on and are able to be used. Thanks again for your help so far, you have already done a ton!
@CodyD – Perhaps you can share your site URL so I can have a look at the specific issues you are experiencing? That might allow me to give you a more specific fix.
@_bill_ the site is not currently live, however it should be on Monday, I will let you know the information once it is up. Thank you again for your help.
@codyd Understood. You may want to try a higher z-index and see if that helps in your situation. Try changing the “1” to something much higher, like “9999” and see if that makes any difference.
I have this question as well. What is the coding to make the menu switch to a mobile menu at a certain width?
Website: cliffwoodorganic.com/dsgopt2
The topic ‘menu overlaps content when resizing browser’ is closed to new replies.