[Support request] realign header

[Craig]

Hi Guys

I would like to realign the header but cannot figure out how to do this.

I would like the logo centered and the burger bars sitting on the left side of the page.

Are you able to assist with this?

kind regards

Craig

[Leo]

Hi there,

Can you try setting the header alignment to center first?
https://docs.generatepress.com/article/header-layout/#header-alignment

Then I’ll provide the CSS to relocate the menu toggle.

Let me know 🙂

[Craig]

Hi Leo

The header alignment is and was set to center.

Thanks

[Leo]

Can you disable the caching plugin first?

[Craig]

I don’t have a specific caching plugin but maybe it’s Jetpack that’s causing issues. I have disabled that.

[Leo]

So basically you want the static header to match the sticky header?

If so try activating the navigation as header option:

Then edit this CSS:

nav#sticky-navigation .navigation-branding {
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

to this:

.main-navigation .navigation-branding {
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
}

[Craig]

Thx Leo

That centers the logo. Halfway there. How do I get et the burger menu onto the left side of the page? With this, it is still on the right-hand side of the page.

Thanks again

[Craig]

Sorry Leo and when scrolling I need the stick menu to be fullscreen.

[Ying]

To move the menu icon to the left, try this CSS:

.inside-navigation.grid-container {
    justify-content: flex-start;
}

To make the sticky menu full width, go to customizer > layout > Primary Navigation, set the Navigation Width to Full.

[Craig]

Thanks Guys you are awsome

[Ying]

Thanks Craig 🙂
You are welcome!

[Craig]

Hi Guys

At the moment the logo and menu are part of the Hero.

I would like the logo and menu to sit at the top, followed by the line banner(sign up), followed by the hero. I am struggling to achieve this.

Thank you

[David]

Hi there,

looks like you’re using a Header Element in Appearance > Elements to merge the Site Header and the hero.
Edit that Header Element, and on the Site Header tab uncheck the Merge with Content option.

https://docs.generatepress.com/article/transparent-header-and-navigation/

[Craig]

You really are my best 🙂

Thank you

[David]

Glad we could be of help

[Author]

Posts