Make header & menu sticky

[Cristo Rey]

This probably relates to some custom CSS that I got from you (I don’t know CSS, so I always rely on GP for help.
On one of my websites (thecatholictravelguide.com) the header & menu are sticky. That is the way I want it. But on my other website https://store.thecatholictravelguide.com/ the menu is sticky but not the header.

I want to make that site have a sticky header and menu as well. Just need to know what CSS I used on the other site.

[Leo]

Hi there,

I’m not seeing the sticky header on the link you’ve provided.

Are you referring to the top bar with the COVID message?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cristo Rey]

No, not talking about the top bar. I mean the header that has my logo and title. When I scroll down the page on The Catholic Travel Guide.com the blue sky background, site title and menu all stay sticky. Not sure how I did that but I would like to duplicate that on our store website

[Leo]

Can you check if there is a hook element added for the sticky branding?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cristo Rey]

Is this the hook?

<p class=”main-title” itemprop=”headline”>
The Catholic Travel Guide
</p>

If so, how do I change it for http://www.store.thecatholictravelguide.com?

[Cristo Rey]

Sorry, I meant this:

<p class=”main-title” itemprop=”headline”>
The Catholic Travel Guide
</p>

Do I just change to http://www.store.thecatholictravelguide.com and also rel=”home”> store The Catholic Travel Guide ?

[Cristo Rey]

<p class=”main-title” itemprop=”headline”>
The Catholic Travel Guide
</p>

[Leo]

Please highlight the code and click the code button in the editor.

The hook should look like this:

<div class="site-branding sticky-brand">
    <p class="main-title" itemprop="headline">
        <a href="http://www.thecatholictravelguide/" rel="home">The Catholic Travel Guide</a>
    </p>
</div>

You would need to add the same hook in the other site and edit the link.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cristo Rey]

thanks..I did that and replaced http://www.thcatholictravelguide.com with http://www.store.thecatholictravelguide.com and also “home” changed to >store.the catholic travel guide but still not working. But now that I look at it, I will stay with just the sticky menu at the top.

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts