Archived topic
Primary navigation doesn't align with secondary navigation using Flexbox
12 replies · Started by Clayton on October 21, 2020
Hey guys,
I've changed over to using flexbox which all around is better than floats but I've noticed the navigations aren't aligned now. I don't have any custom css that would be effecting this. I have a max-width set in the theme settings and have the inner navigations contained and floating but I'm still seeing the issue.
See my screenshot: https://imgur.com/a/EgCUPKU
Any thoughts on why this would be happening?
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hey Leo, I've linked the site in the private section. Thank you.
Can you disable Autopimize so I can inspect the code properly?
Okay, it's been disabled.
Still not able to view the source.
Are you using any caching plugins as well?
Can you make sure they are disabled?
Thanks :)
Hmmm, I'm not sure. That is the only caching I have enabled on this site. Can you try again?
Are you using Text for the Content Alignment option in Layout > Container?
If so can you try Boxes instead?
So that seemed to fix the menu but now the body content and the navigation aren't in line which is why I had align with text selected.
I think this section explains the issue:
https://docs.generatepress.com/article/switching-from-floats-to-flexbox/#box-sizing
Ahh, yeah I guess that makes sense. I adjusted the width to account for the padding applied and it seems to be working now. It still isn't in line on mobile but that isn't too big of a deal. Thanks for looking into it.
For others who might use this thread. If you set the mobile mobile menu item width to 0 it fixes the alignment issue on mobile.
Glad to hear!
Nice looking site using GB :)
