[Resolved] horizontal centering of menu in header

[Steig]

Hello Tom,

I’ve moved my primary menu inside the header floated to the right side. But I can’t seem to get it to center horizontally. It wants to ride towards the top of the page. I’ve made the menu taller, which brings it down some, but that doesn’t seem the correct way of fixing it. Is there a center option for the horizontal part? I see a variety of controls for centering vertically.

Also, an add on question. I have enough menu items that when the window width gets small enough that the menus run into the logo (which is on the left), they just drop down below it and don’t look good. If I continue to narrow the window, the menus ultimately turn into mobile windows, which is fine. Can I somehow control when they make that transition? If I could set the px width and when the menu starts bumping into the logo, just switch over to the mobile menu, that would be great.

website is https://arlinstitute.org

Thanks!

[Tom]

Hi there,

You can move it down to center horizontally like this: https://generatepress.com/forums/topic/center-menu-with-logo/#post-233209

You can initiate the mobile menu at your desired width with this code: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Just be sure to star the gist, as I’ll update it as the code changes in future versions.

Hope this helps 🙂

[Steig]

Thanks Tom! The code that horizontally centered the menus introduced about a 10px space between the browser and the header bar when scrolling down the page. How could I bring the menu bar back to the top?

[Tom]

Hmm that code shouldn’t apply to the sticky navigation – can you link me to your page?

[Steig]

https://arlinstitute.org

[Tom]

You could try this:

.main-navigation.navigation-clone {
    margin-top: 0;
}

[Steig]

That fixed it. Thanks!

[Tom]

You’re welcome! 🙂

[Author]

Posts