How to Stick Secondary Navigation?

[optimizeit]

Hello, I want to make secondary navigation sticky and visible.

Screenshot: https://i.imgur.com/JuyScwK.png

Thanks

[David]

Hi there,

add this CSS:

#secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
@media (max-width: 768px) {
    #secondary-navigation, #secondary-navigation ul {
        display: block;
    }
    #secondary-navigation .menu-toggle {
        display: none;
    }
    #secondary-navigation {
        top: 40px;
    }
}

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

[optimizeit]

Thanks for the reply.

1. It is giving this error when I add the CSS: https://i.imgur.com/bWwdQFF.png

2. I have Primary Bar as Sticky as well in the mobile. How can I make it perfect for the mobile where both Primary and Secondary are sticky? Please check.

3. Secondary is not sticky in mobile: https://i.imgur.com/ZLbXK6T.png

4. Secondary is not visible in mobile either. I want to show it.

Thanks.

[optimizeit]

Still Looking for Answers!

Thanks for the reply.

1. It is giving this error when I add the CSS: https://i.imgur.com/bWwdQFF.png

2. I have Primary Bar as Sticky as well in the mobile. How can I make it perfect for the mobile where both Primary and Secondary are sticky? Please check.

3. Secondary is not sticky in mobile: https://i.imgur.com/ZLbXK6T.png

4. Secondary is not visible in mobile either. I want to show it.

Thanks.

[optimizeit]

Still Looking for Answers!!

Thanks for the reply.

1. It is giving this error when I add the CSS: https://i.imgur.com/bWwdQFF.png

2. I have Primary Bar as Sticky as well in the mobile. How can I make it perfect for the mobile where both Primary and Secondary are sticky? Please check.

3. Secondary is not sticky in mobile: https://i.imgur.com/ZLbXK6T.png

4. Secondary is not visible in mobile either. I want to show it.

Thanks.

[David]

I edited the CSS here

You can safely ignore the warnings in the Additional CSS.

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

[optimizeit]

Thanks. I have tried the navigation with your CSS and it is working fine. I will try to populate the menu more and see if it’s fine or else I let you know further.

Please if you could check my other thread which is unanswered: https://generatepress.com/forums/topic/content-is-not-pleasant-to-read/

[David]

You’re welcome

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

[Author]

Posts