Navigation Menu Adjusting Size Incorrectly - Possible mid menu between header and dropdown?
resolver
My company has run into an issue with our navigation menu when adjusting the browsing window to various sizes. There is a slight section in the middle of the size range where the nav menu is showing as a big white box (see attached screenshot). I've also included an example webpage linked here for additional testing and visitibility.
It appears the nav menu has a halfway option between being a horizontel header and a condensed drop down that is unsightly in it's current configuration. I've also noticed in testing web pages that this white box is always showing in the tablet preview.
It appears that there are some conflicting / unfinished CSS (styling) rules for the main navigation.
I see that there are rules for making the main navigation show up in the mobile layout when the browser width becomes 922px or less.
This is how it would appear without the white background:
However, the problem is that the rules for showing the hamburger menu (which also controls whether the mobile navigation is open/closed) start only when the browser screen size becomes 768px or less.
This means that the if the browser width is between 769px and 922px, the navigation is getting confusing styling instructions.
Here is an example of what the page would look like if the 992px rules were removed and the mobile styling started only at 768px
I would suggest reaching out to the person / team who helped set up this theme to resolve this bug. If that is not an option, let me know and we can see if there's anything we can do.
✔️ Did this post help answer your query? Help the community by marking it as a solution.
It appears that there are some conflicting / unfinished CSS (styling) rules for the main navigation.
I see that there are rules for making the main navigation show up in the mobile layout when the browser width becomes 922px or less.
This is how it would appear without the white background:
However, the problem is that the rules for showing the hamburger menu (which also controls whether the mobile navigation is open/closed) start only when the browser screen size becomes 768px or less.
This means that the if the browser width is between 769px and 922px, the navigation is getting confusing styling instructions.
Here is an example of what the page would look like if the 992px rules were removed and the mobile styling started only at 768px
I would suggest reaching out to the person / team who helped set up this theme to resolve this bug. If that is not an option, let me know and we can see if there's anything we can do.
✔️ Did this post help answer your query? Help the community by marking it as a solution.