Sticky header with widgets

Hi there,

it is possible with some code. But your Book Now Button is not part of the site header.
And you have to be mindful that making = your top bar, header, navigation and button sticky would occupy a lot of screen space when a user scrolls. For smaller laptop users that could be more than a 3rd of their screen taken up.

My suggestion would be make your Main Navigation full width and include the Button inside the nav. This article explains how to make a menu item behave like a button:

https://docs.generatepress.com/article/adding-buttons-navigation/

You can then enable Sticky Navigation add a logo to it.

Any good ?

Thank you this works great on the desk top Is there a way to get the button sticky on mobile so the call to action is on mobile too.

Hi there,

Thankfully, this will be much easier in GP 3.0.

For now, your sticky navigation is only a button, so there's no way to insert another button into it.

Perhaps the Mobile Header feature is worth looking into? Then you could do this:

1. Create a Hook Element:
2. Add your button to the element:

<a class="hide-on-desktop hide-on-tablet button" href="URL HERE">My button</a>

3. Choose the generate_inside_mobile_header hook.
4. Set your Display Rules.

Let us know :)

Thanks all, I think I am getting there, last question is there a way of adding a hover effect to the button on the Navigation bar, all I want to do it was it change background colour to a brown and text to white when someone hovers over the button.

Try adding this additional CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.Book-now a:hover {
        background-color: #000;
        color: #fff;
    }
}

Thank You all Working

No problem :)