[Resolved] Sticky header with widgets

Home Forums Support Sticky header with widgets

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1402430
    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.

    #1402476
    David
    Staff
    Customer Support

    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 ?

    #1412630
    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.

    #1413259
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1417158
    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.

    #1417667
    Leo
    Staff
    Customer Support

    Try adding this additional CSS:

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

    Thank You all Working

    #1420670
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.