Archived topic
Navigation Drop Point Help
3 replies · Started by Benjamin on July 7, 2021
Hi guys,
I am trying to set the navigation drop point/ mobile menu breakpoint in the customizer but for some reason, I can't get it to work as I want it to.
In the screenshot below the website is being displayed on a small screen, I have determined with chrome dev tools that the navigation drops below the logo at just below 700px. How can I get the navigation and logo to display centered underneath one another once the screen reaches this size or smaller? Is it possible to do so without adding any additional CSS- I try to keep my site as light as possible- thanks.
[image removed for privacy purposes]
I've been able to do this when the site structure is set to floats, but I need it to be in flexbox in order to avoid CLS issues for Web Vitals.
I hope that makes sense.
Hi there,
the Navigation Drop Point won't do anything in this instance. Its for the Desktop screen sizes for really long menus that would clash with the logo on smaller desktop screens. Which isn't required in this case.
My suggestions would be to keep the Logo / search / hamburger in line if you can. And you could do the following:
1. reduce the left/right Mobile Padding of the Customizer > Layout > Site Heading to 20px
2. reduce the mobile Menu Item width of the Customizer > Layout > Primary > Navigation also to 20px.
This should create enough space for them to remain inline.
Regarding CLS - this will only occur if the browser cannot reserve space for the logo, which shouldn't be an issue. But i notice you're using a Lazy Loader which may be affecting that. Recommend disabling lazy load on logos as they are above the fold.
Most lazy loaders provide options to exclude images with a specific class. You can use the is-logo-image class
Hi David,
Thank you! That did the trick.
Regarding the CLS- I just want to clarify it's not an issue- I just mentioned- basically that I found having the site structure set to flexbox reduces that because it assigns a height- and width- element to the logo, whereas float doesn't do that.
Anyway, cheers!
Glad to be of help!
