Center menu with logo

Do you need vertical align or horizontal align?
Can you please share a link or a screenshoot?

You might need to add top margin to the menu:

@media (min-width: 769px) {
    .main-navigation:not(.is_stuck) {
        margin-top: 20px;
    }
    .main-navigation:not(.navigation-clone) {
        margin-top: 20px;
    }
}

Hi Guys

When I saw your suggestion Tom I thought that would work but what happens is the margin also occurs above the sticky menu causing it to sit below where it should be located by the amount set for the .main-navigation.

I've provided a couple of screenshots

Is this maybe a bug because it's pretty much what's happened with every CSS option I've tried so far ?

Cheers

I just adjusted the CSS above - give it another shot.

Hi Tom

I gave that a shot but its still the same.

Its on the site i sent credentials for about a month ago.

Maybe it would help to access the site and have a look.

Cheers

Sorry I overlooked something and this appears to work.

@media (min-width: 769px) {
	.main-navigation:not(.is_stuck) {
		margin-top: 0;
	}
	
	.main-navigation:not(.navigation-clone) {
		margin-top: 15px;
	}
}

I still have a little more testing but I feel its sorted now.

Cheers

Awesome :)

Is this still the right code... my sticky still seems to have the margin? Mobile looks fine, just desktop.

Yeah that CSS should work Drew though you may have to play with the pixel amount to match your menu item / site logo heights

From memory on my site the logo height is 70px with 5px of padding top and bottom, so 80px overall and the menu items height is 50px with the 15px of padding as shown in my example above making 80px overall if you count in the 15px below the menu items which isn't accounted for by setting but remains below the menu items by default given the height is governed by the logo in my particular situation.

Here's a link to the live site if you want to inspect the code.

Hope that helps

It should be this:

@media (min-width: 769px) {
    .main-navigation:not(.is_stuck) {
        margin-top: 20px;
    }
    .main-navigation:not(.navigation-clone) {
        margin-top: 20px;
    }
}

Basically this adds 20px of space (adjustable) above your navigation, as long as it isn't sticky.

Thanks for the help guys!

Man... I must have something that is not working? Using the code... tried a few different things but still seems to add the margin to the sticky (only on desktop though...mobile sticky looks great?

Sorry, more of a designer than a developer so my CSS knowledge is very limited.

I see the problem, let's try this instead:

@media (min-width: 769px) {
    #site-navigation {
        margin-top: 20px;
    }
    #site-navigatio.navigation-clone,
    #site-navigatio.is_stuck {
        margin-top: 0;
    }
}

Let me know - your site is looking awesome! :)

Awesome that worked!

Thanks!!

You're welcome :)