Navigation Usability

[John]

I’m sure somewhere this has been answered here in the forums, but I can’t seem to find it. I’ve tried using some of my personal CSS tricks to fix the issue I am having, however, the custom CSS I tried to input for this issue is not even rendering so it must be getting canceled out somewhere by another set of code or settings.

Anyways, the top navigation is fine when it comes to desktop view and mobile view. But when we go to tablet view it looks like we enter a z-index hell. My preferred way to fix this is by using a hamburger menu in tablet view so it can stay clean on that top panel and keep the focus on the signup CTA, but even putting some spacing between nav and the CTA section would work although I’m concerned it would mess up with the aesthetic of that top section so that would be my worst-case scenario fix.

I just can’t get my CSS chops to work it, and I figure you guys know the code for GeneratePress better than me so we can (preferably) go the hamburger menu route.

[David]

Hi there,

my suggestion would be:

1. Edit the Header Element and increase either the Top Padding or the Offset Site Header Height to give the CTA a bit more headspace – you can set them separately for desktop and mobile.

2. Increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation so it kicks in before the navigation wraps to a new line.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Perfect, thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts