- This topic has 14 replies, 4 voices, and was last updated 7 years, 3 months ago by Tom.
-
AuthorPosts
-
October 7, 2016 at 3:24 am #233123Garth Dryland
Hey Tom
I cant seem to find the answer i’m looking for.
Whats the best solution to center the .main-navigation menu with the site logo / header image ?
Unless I use an image that works height wise IE with the same height as the primary menu items the menu sits above off center from the logo image ?
How do line up them up so they’re centered horizontally when the image is larger than the height of the menu items?
Cheers
October 7, 2016 at 5:52 am #233154Roberto EnriqueDo you need vertical align or horizontal align?
Can you please share a link or a screenshoot?October 7, 2016 at 8:44 am #233209TomLead DeveloperLead DeveloperYou 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; } }
October 7, 2016 at 12:26 pm #233328Garth DrylandHi 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
October 7, 2016 at 1:13 pm #233346TomLead DeveloperLead DeveloperI just adjusted the CSS above – give it another shot.
October 7, 2016 at 1:48 pm #233354Garth DrylandHi 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
October 7, 2016 at 1:55 pm #233355Garth DrylandSorry 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
October 7, 2016 at 4:32 pm #233382TomLead DeveloperLead DeveloperAwesome π
December 13, 2016 at 3:17 pm #254443DrewIs this still the right code… my sticky still seems to have the margin? Mobile looks fine, just desktop.
December 13, 2016 at 8:55 pm #254502Garth DrylandYeah 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
December 13, 2016 at 11:28 pm #254520TomLead DeveloperLead DeveloperIt 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.
December 14, 2016 at 7:43 am #254641DrewThanks 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.
December 14, 2016 at 11:15 am #254728TomLead DeveloperLead DeveloperI 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! π
December 14, 2016 at 11:49 am #254749DrewAwesome that worked!
Thanks!!
December 14, 2016 at 7:53 pm #254891TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.