[Resolved] Position navigation lower within header

[Lucy]

Hi there

I’ve created a header with split navigation and centered logo following some instructions I found in here. What I can’t work out how to do is position the navigation lower within the header.

This is the site: https://staging2.beautybrandsconnector.com/

So I would like the navigation labels (home, about, etc) to be more in line with where it says ‘HELEN PORTMAN-BROOKES’ in the logo rather than vertically centered as it is now.

Thank you!
Lucy

[David]

Hi there,

you would need to edit the Customizer > Layout > Site Header –> Padding.
Remove the bottom padding ( 0 ) and double the value of the top padding ( 120px ).

And in this CSS that positions the logo it would need a top value added – see here:

@media (min-width: 769px) {
    .inside-header > .site-branding, .inside-header > .navigation-branding, .inside-header > .site-logo, .site-branding-container, #site-navigation .navigation-branding .site-logo, #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        top: 0; /* Top value needs to be added */
    }
}

But i notice the SVG that is being loaded for the logo has a very tall empty canvas space, which means the logo position will be out of whack when doing that. Can you edit the logo and crop the canvas so its not so tall ?

[Lucy]

That’s perfect now, thank you! I hadn’t noticed the shape of the svg so I’ve fixed that.

Best wishes
Lucy

[Author]

Posts