[Resolved] Center menu with logo

Home Forums Support [Resolved] Center menu with logo

Home Forums Support Center menu with logo

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #233123
    Garth 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

    #233154
    Roberto Enrique

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

    #233209
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #233328
    Garth Dryland

    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

    #233346
    Tom
    Lead Developer
    Lead Developer

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

    #233354
    Garth Dryland

    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

    #233355
    Garth Dryland

    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

    #233382
    Tom
    Lead Developer
    Lead Developer
    #254443
    Drew

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

    Menu Margin Code

    #254502
    Garth Dryland

    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

    #254520
    Tom
    Lead Developer
    Lead Developer

    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.

    #254641
    Drew

    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.

    #254728
    Tom
    Lead Developer
    Lead Developer

    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! πŸ™‚

    #254749
    Drew

    Awesome that worked!

    Thanks!!

    #254891
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.