Archived topic

Centre align nav when using in between logo and CTA, and responsive behaviour.

5 replies · Started by Mark on December 12, 2022

Viewing posts 1–6 of 6

December 12, 2022 at 9:06 am #2459292

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!

December 12, 2022 at 9:55 am #2459363

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.

December 13, 2022 at 5:02 am #2460312

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

Appreciate it!

December 13, 2022 at 5:47 am #2460354

You're welcome

February 27, 2023 at 4:22 pm #2549339

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?

February 27, 2023 at 4:51 pm #2549353

Hi Jessica,

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

Thanks!

This archived topic is closed to new replies.

Start building better websites today.