Archived topic
Full width header with logo to far left - centre align main navigation menu?
9 replies · Started by Stephen on December 4, 2021
Hi
I have played around trying to get my header area looking something like The Spruce - https://www.thespruce.com/
Their menu seems aligned to the right of the content, but I would like to align mine centre over the content area if possible, with logo to far left of screen on desktop.
I did a search of the forum but couldn't quite find what I needed.
I have tried full width with nav menu float right, but with a full-width header section, the menu is too far to the right.
Thanks, love the theme and GP premium, and your great support.
Merry Christmas!
Hi Stephen,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Ok, have done that, thx
But I have not got it set up with the full width header at the moment. I get a reasonable amount of visitors per day so don't want it looking messed up :-)
Hi there,
try adding this CSS to your site:
@media(min-width:1250px) {
#masthead .inside-header, .main-navigation .inside-navigation, .main-navigation .main-nav > ul {
max-width: 100%;
display: flex;
align-items: flex-end;
}
.nav-float-right .inside-header .main-navigation, .main-nav {
flex: 1;
}
.main-nav {
position: relative;
bottom: -10px;
}
.main-navigation .main-nav > ul > li:nth-last-child(2) {
margin-right: auto;
}
.main-navigation .main-nav > ul > li:first-child {
margin-left: auto;
}
}
@media(min-width: 1480px) {
.main-navigation .main-nav > ul > li:last-child {
margin-left: 215px;
}
}The menu can only really be centred on larger screens - thats what the last @media rule is doing at 1480px its kinda faking the width of the search icon to match the width of the logo so the menu can sit dead center.
Thanks David, worked a treat.
Suppose I wanted to be REALLY finicky and align menu vertically with the main logo text?
Last thing, how would a add a 1px line below the header to break the white space up?
Cheers
Sorry to be a pain David, but are you able to just look at my drop downs in the header menu too. Seems some odd stuff going on.
In my menu I only have one level of sub menu categories below the parent level which is showing on the top of the page, but seems like some of the dropdown boxes are being left blank and the categories are being shifted to the right
The LIVESTOCK menu item is an example
MAny thanks
Wow i must apologise - hell knows what i was thinking with that shoddy CSS....
I updated the CSS above - give that a shot.
Sweet, that looks great David. Thanks so much!!!
Glad to hear that!!
