Sticky header with widgets

[Darren]

Is there a way to have the whole header, including widgets, logo and navigation bar to be made stick. as I want my book now button to scroll with the page.

[David]

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 ?

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

[Darren]

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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Darren]

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.

[Leo]

Try adding this additional CSS:

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

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

[Darren]

Thank You all Working

[Leo]

No problem 🙂

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

[Author]

Posts