Responsive mode displaying mobile menu on anything smaller than 1240px screen
https://bigfishcider.com
I haver responsive mode enabled. I have my mobile set to 700 in the Theme Options under Responsive. However at any screen size smaller than 1240, it displays the mobile menu instead of the regular non-mobile menu.
I have done and "inspect element" and it looks like somehow the BeTheme is defaulting to a min-width of 1240px for the regular menu, but I'll be darned if I can find out where that's set, or why it would be set so very high!
Adding custom CSS with media queries that set the responsive toggle menu to have a lower max, and the regular menu to have a higher minimum doesn't do anything other than result in no menu displayed at screen widths lower than 1240px.
Comments
Here is the theme CSS I'm seeing when I inspect element on a normal desktop menu (larger screen size than 1240px):
@media only screen and (min-width: 1240px) {
.header-stack.header-center #Top_bar #menu {display: inline-block!important;}
}
Here is the theme CSS I'm seeing with I inspect element on anything smaller than 1240px wide:
@media only screen and (max-width: 1239px){
#Top_bar a.responsive-menu-toggle {display: block;}
}
I know that 1240 is related to the Grid Width parameter in the Global Options for the theme, but if the default is 1240, why would that set it as the mobile screen width as well?
Nevermind....For some reason the BeTheme defaulted to 1240px in Responsive/Header under Mobile breakpoint. Why on earth would you have that be the mobile breakpoint for mobile menu? No one's mobile device is that wide. Geesh.