[Resolved] Centering Logo Menu – Desktop

[fabiosilva]

Hi,

Firstly, Happy New Year! 🙂

I’m trying to create a menu like this to work only on desktop:. For mobile, I will prefer de Generatepress standards:
https://i.ibb.co/7NNFJb7/MENU.jpg

I tried to follow this tutorial, setp by step:
https://docs.generatepress.com/article/centering-logo-navigation/

But, the result has:
https://i.ibb.co/z6L02Jk/real.jpg

Any simple way to make this?
Basically, I want to place the logo in the center, and center the menus in the respective columns.
The cart could be aligned to the right (by default)

Thank you very much for your help

[David]

Hi there,

Couple of things:

1. Add this CSS to fix the menu spacing:

.main-nav {
    flex: 1;
}

2. Edit this part of the center logo CSS, and include the extra line i have commented below:

.site-branding, .site-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
    top: 0; /* Add this line */
}

This will fix the logo issue on the Mobile Header when the nav is opened

[fabiosilva]

Thank you, David.

I think it solved.
How can I make the logo not ignore the top and bottom header paddings?

[David]

You would need to adjust the top: 0; value e.g top: 10px; will move it 10px down the page.

[fabiosilva]

Hi,

This solution for centered logo, on desktop, not work’s very well with fixed navigation.

Any way to make fixed navitagion ignore centered logo?

Thank you.

[Leo]

We’ve actually updated the method recently.

Can you try the new method here?
https://docs.generatepress.com/article/centering-logo-navigation/

[fabiosilva]

Hi, Leo. Yes, work better.
But my problem keeps.

So, now, fixed menu works better, but the transition between fixed and static menu, is not fine. :-S

Can you check my loom video?

Thank you, Leo.

[David]

Hi there,

theres no simple fix for that ( Although i rather like the effect 🙂 ) when using the Site Header and the Sticky Navigation. Instead you would want to use the Navigation as Header Option in Customizer > Layout > Header, as then there will be only one logo to display.

[fabiosilva]

Yes, you are right! 🙂 Perhaps it is not so problematic.

What I don’t like is the bottom fixed menu shadow, which is not doing the pass very well (between fixed menu and header).

[Ying]

Hi Fabiosilva,

Try this CSS to remove the box shadow when scrolling up:

#sticky-navigation.sticky-nav-scrolling-up {
    box-shadow: none;
}

Let me know 🙂

[fabiosilva]

Thank you, Ying! 🙂

[Ying]

No problem 🙂

[Author]

Posts