[Resolved] Dont Want to use jquery and still want sticky navigation with CSS

Home Forums Support Dont Want to use jquery and still want sticky navigation with CSS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1358306
    Muhammad

    I researched and found this and implemented it to the website.

    https://generatepress.com/forums/topic/sticky-navigation-5/

    #site-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }
    .header-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }

    Now it’s not using jquery and it’s sticky on desktop but not mobile devices.

    1- How do I also make the navigation sticky on mobile devices?
    2- Why can’t I change the color of the header and the titles inside it?
    3- Why the sticky slider is transparent and how to change its color?

    #1358438
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. You’re using the mobile header, so you’d need to add this:

    #mobile-header {
        position: sticky;
        top: 0;
    }

    2. How are you trying to? Via the Customizer?

    3. When your header is merged like it is, the plugin specifically re-styles the navigation when it’s sticky to use your navigation colors. Since you’re not using the built-in sticky solution, it can’t do this. In fact, there is no way to target your sticky navigation, as it’s not using JS to become sticky, unfortunately.

    #1358735
    Muhammad

    Okay I ended up fixing all the other things… the only issue is the mobile header not being sticky… with the code you provided even. I am using the theme volume

    #1358794
    David
    Staff
    Customer Support

    The code Tom provided does work.
    Where are you adding it ? Wherever that is try moving that code to the very top of the CSS stack.

    #1358900
    Muhammad

    Hi thanks that fixed the issue for me.

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