[Resolved] Making the logo bigger than what the main navigation height allows

[g_younes]

When the logo is placed inside primary navigation, it takes the maximum height that the navigation allows.
Is there a way to go beyond that?
I have a secondary navigation menu above the primary navigation, and I want the logo to span both of them.

There was a css suggestion from the support in a similar ticket:
https://generatepress.com/forums/topic/circle-shaped-logo-in-navigation-to-span-larger-than-the-navigation/

But the css suggested in there didn’t work (it created an additional full-width horizontal bar just for the logo and placed it between primary and secondary navigations, instead of spanning them both together).

I know this could be a bit tricky, especially that I want to preserve sticky navigation (and the primary menu changing to a smaller size along with the logo when scrolling down). It probably needs a lot of custom code to preserve all of that and probably support won’t be able to go that far – but thought of asking anyway.

Thank you

[Leo]

Hi there,

Give this CSS a shot:

@media (min-width: 769px) {
    #site-navigation .navigation-branding img {
        position: absolute;
        left: 0;
        top: -25px;
        height: 75px;
    }
}

Let me know 🙂

[g_younes]

Thank you! This actually worked but it’s a bit jumpy (not very smooth transition) but I guess it will do for now.

[Leo]

No problem 🙂

[Author]

Posts