[Support request] Centre align nav when using in between logo and CTA, and responsive behaviour.

[Mark]

Hello,

I have scenario that I can’t find previous support for. I am currently floating the nav right with the logo to the left. So it’s the logo, then the menu items, and then a CTA button within the nav on the right right (using elements, example in private area).

I am trying centre the menu items in between the logo and the CTA button, which I can’t seem to do. I can increase the menu item width so they are evenly spread out, but that makes them way too spaced apart. I’ve also tried using ‘Use navigation as header’ but have similar issues.

Lastly, I’m struggling to sort the behaviour of the menu as the screen size decreases. Eventually, the CTA (added through elements) goes onto a new line, and then more menu items do the same as it gets smaller, before eventually switching to the mobile menu. What’s the best way to handle this?

Thanks in advance!

[David]

Hi there,

to center the navigation between logo and CTA add this CSS to your site:

.main-navigation {
    width: 100%;
}
.main-navigation .main-nav {
    margin: auto;
}

How to add CSS: https://docs.generatepress.com/article/adding-css/

For the responsive behaviour go to Customizer > Layout > Primary Navigation and:

1. First i would suggest reducing the Menu Item Width sothe items occupy less space.
2. Set the Mobile Drop Off point to say 1000px. At that screen size you the entire nav will drop to a new line.
3. Set the Mobile Menu Breakpoint to say 850px. At that point the menu will switch to a hamburger.

You will need to adjust the values for #2 and #3 to suit.

Let me know how you get on.

[Mark]

Thanks David, centre align works perfectly, will have a play with the drop off/break points etc.

Appreciate it!

[David]

You’re welcome

[Jessica]

Hi David,

I have used your CSS from above to center my primary menu. But I also use a sticky menu and it also becomes centered (which I’d like) but it is slightly moved to the right and not fully centered (e.g. when scrolling down the menu items jumps to the right). Any idea why or how this can be adjusted?

[Leo]

Hi Jessica,

Any chance you can open a new topic and link us to the page in question?

Thanks!

[Author]

Posts