Archived topic
Center main nav on page
3 replies · Started by Keith Taylor on March 4, 2022
Hi
I currently have my main nav floating right, with the logo on the left. The header is full width.
I'd like to get it so that the main nav is central on the page. If I add "margin-right:auto" to the nav, this centers it, but only relative to the remaining width of the page after the logo. I'd like to get it centered relative to the whole page width.
I'd then like to have the search icon and one of the links from the menu (a login link) floating to the right. (Or maybe this requires secondary nav on the same horizontal as the main nav somehow???)
Is all this do-able?
Many thanks for your help.
Keith
Hi there,
you can do something like this:
.main-navigation .inside-navigation,
.nav-float-right #site-navigation {
flex: 1;
}
.main-navigation .inside-navigation {
margin-left: unset;
margin-right: unset;
max-width: unset;
}
.main-nav {
margin: auto;
}
.main-navigation .menu-bar-items:before {
content: '';
display: block;
width: 94px;
}NOTES:
1. you will probably want to put this in a @media query to limit it to a minimum width of screen.
2. In the last CSS rule you see: width: 94px; - so where did the 94px come from.
In order to center the nav we need to have the menu-bar-items ( search icon ) occupy the same width as the logo.
Using the dev tools the logo is 169px wide and the menu-bar-items is 75px. So we inject a pseudo element of the difference ie. 94px.
This is fantastic, works perfectly. Thanks as always for the great support.
Keith
Glad to be of help!