SOLVED Menu breakpoints display issue
-
-
- panda99
- Newbie
- Posts: 17
- Thanks: 1
-
In Gantry 5, I've noticed an issue with the main menu and Responsive behavior where there's an intermediate state that results in an odd flex display column split and wrapping of the menu items.
When I set device and mobile menu breakpoints in Gantry 5 Styles, I observe that between the mobile menu sizes and desktop sizes, the header menu splits into 50/50 instead of the 20/80 split set in layouts.
Setup:
I have set up the Body layout for the Header with two parts: a Module holding the logo taking 20% and the Menu Particle taking 80%. For testing purposes, I have the breakpoints set in pixels at 1200/1200/1024/768 with the mobile menu at 1000px. I intend to change these to rems later, but pixels make troubleshooting easier as I can measure this precisely in the display.
Problem:
When I do a test by reducing the width of my browser incrementally, everything looks as intended at Desktop/Large sizes (>1200px), and Mobile Menu sizes (<1000px). However, between 1000 and 1200px, the top menu shifts. Instead of using a 20/80 split, the menu is split 50/50. This of course causes the horizontal menu to wrap to a second line, which makes for a broken display.
Using the browser inspector, I've identified the CSS that flips, and this is what I see.
At <1000px when the mobile menu offcanvas icon is showing and the menu is gone, I see this, which is okay:
body [class*="size-"] {
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
-ms-flex-positive: 0;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
max-width: 100%;
}
At the 1000-1200px range, this same page element shifts to this, which is not okay.
#g-header [class*="size-"] {
-webkit-flex-grow: 0;
-moz-flex-grow: 0;
flex-grow: 0;
-ms-flex-positive: 0;
-webkit-flex-basis: 50%;
-moz-flex-basis: 50%;
flex-basis: 50%;
-ms-flex-preferred-size: 50%;
max-width: 50%;
}
The hamburger menu icon has not yet displayed as it is set to be for <1000px, but the Module and Menu Particle now each take up 50% of the width.
At greater than 1200px widths, this code completely goes away, and the menu section is replaced with this:
.size-80 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
-webkit-flex: 0 80%;
-moz-flex: 0 80%;
-ms-flex: 0 80%;
flex: 0 80%;
width: 80%;
}
There is an equivalent CSS rule for the module, but with 20% instead of 80%.
This has been the case for years, and shows up on all my Gantry 5 based sites that I've checked. I've ignored the issue until now as this middle width is not typically used, but it's always bothered me that it happens.
I've tried using a particle to hold the logo instead of a module position, but that doesn't seem to help, and it limits my flexibility in display (I change logos and locations for mobile).
I would appreciate any insight into how this could be solved. I can implement CSS overrides if I can figure out what to override. I could certainly create some @media overrides, but I'm trying to see if there is some built-in method or technique for fixing this so I don't have to go down that rabbit hole of overly complex codes.
Thanks in advance for any help.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
What template are you using?
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Last Edit: 3 years 2 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.048 seconds