[Resolved] Styling Header

[Yael]

Hello,

Trying to sort out my site header and layout.

Two issues.

1. I added custom CSS in order to push the menu down so that it displays in the middle vertically; otherwise it displays at the top of the header.

.main-navigation {
    padding-top: 25px;
}

2. however, the sticky header then looks funky as the logo is at the bottom and the navigation is at the top of the header.

I’m sure there’s a better way 🙂

Sticky header hides on scroll, so you scroll up in order to see it.

Thank you, Yael

[Leo]

Hi there,

I would recommend trying this method to achieve the header layout you are going for:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know if this helps 🙂

[Yael]

Hey Leo,

No, that doesn’t work either.

First, the nav is still not in line with the logo

And second, the header bar is no longer full width

http://staging.short-drop.flywheelsites.com/

user: flywheel
password: energy-healing

Any other ideas on this would be appreciated.

Thank you

[Yael]

On second thought and seeing the live site, I think the sticky header looks just fine.

https://energyhealinginstitute.org/

So closing this ticket.

[Leo]

Ok sounds good 🙂

Let me know if you need another look.

[Author]

Posts