[Resolved] Fixed Header with no replacement

[Ashley]

Hi Guys,

I’m looking to have a permanently fixed header on desktop on my new site here: http://2019.nine2demos.co.uk/

I know the option exists somewhat to do a sticky header but I don’t want to have it ‘replaced’ as you scroll.

I’d also like for the header to adapt to the grey admin bar if logged in.

[Tom]

Hi there,

I would use your navigation as the header: https://docs.generatepress.com/article/navigation-as-a-header/

Then you can set the navigation to sticky (without a transition), and it should be exactly what you’re looking for.

Let me know 🙂

[Ashley]

Worked like a charm, thanks Tom! – Sometimes you can’t see the wood for the trees with GP help articles! – I know I’d definitely have it that way then no support at all!

On the same project, I’m ultimately trying to create a header similar to this.

Is there a way to ‘split’ the nav and have some buttons and contact info over to the right while the nav links stay left aligned to the logo?

[David]

Hi there,

try this CSS:

@media (min-width: 768px) {
    .main-navigation ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .main-nav ul li.call-me-back {
        margin-left: auto;
    }
}

[Ashley]

Hi Dave,

I’m almost there! – thanks for the help 🙂
I’m struggling to add the text and link to the left of the button at the moment.

Any pointers for that?

[David]

You can add that as another custom link in the menu before the button, then move the call-us class to that menu item and remove it from the button. It will then push both menu items to the right.

[Ashley]

Perfect David, thank you!

[David]

Glad to be of help.

[Author]

Posts