[Resolved] Sticky Secondary and Primary Menu

[Ian]

Howdy,

Would it be possible to make both the primary and secondary menu sticky? Thanks for the help!

Ian

GP Premium 1.7.7

[Ender]

GP supports native only the primary navigation for sticky effects. I have in the past very good experiences with the Plugin myStickymenu.

[Leo]

Hi there,

Give this CSS a go:

.navigation-stick + .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    right: 0;
    top: 62px; /* Adjust this number if needed */
}

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

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

[Ender]

Many Thanks.

The code works for me only for sizes from 768px. How can you set it to work on sizes below 768px?

Other question would be: How we can turn off that the primary area is not sticky.

[Ian]

Thanks to you both!! So I noticed that on different browsers and different screen sizes the px number needed to be different. I tried to account for that but on the same computer the number needed to be different between MS Edge and Google Chrome. I’m installing the Plugin myStickymenu.

Question…

Any idea what the “menu or header element class or id” should be for me to make both menus sticky??

Cheers,

Ian

[Ian]

@Ender check this out https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

[Ender]

Many thanks @ian. I think it’s a bit complex and not easy with the css. I have now the plugin back activated.

[Ian]

Ok I think I have the CSS solution figured out. When I set “Menu item height” under (appearance->layout-.customize->sticky menu) to the same size (62px) as the regular menu size, it seems to work on different browsers and different screen sizes!! Hooray!!

Now a question… Would it be possible to disable both of the sticky menus for the homepage? Right now it is making the page element skip and look weird when scrolling.

[Ender]

@ian i think there is a possibility to exclude certain pages.

.page-id-xx #sticky-navigation,
.page-id-xx #sticky-navigation {
    display: none;
}

or u can use a snippet

add_filter( 'option_generate_menu_plus_settings','lh_turn_off_sticky' );
function lh_turn_off_sticky( $options ) {
    if ( is_page( 554 ) ) {
        $options['sticky_menu'] = 'false';
    }
    
    return $options;
}

Look here: https://generatepress.com/forums/topic/sticky-primary-navigation-for-specific-pages/page/2/

Any Ideas how to turn off sticky for primary menu?

[Ian]

Wow thank you! The snippet worked perfectly, now both menus are static on the homepage!

However, the fixed background image for the page element on the homepage still jumps when scrolling. If i disable the sticky menu then the page element scrolls smoothly. See the jumping here: NRMG.org

[Tom]

Hey Ian,

I’m not seeing any jumping – is this still happening?

Let me know 🙂

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

[Ian]

No it’s not… but I didn’t change anything. I love it when a problem fixes itself! Yehaww!!

Thanks to you guys once again for amazing support 🙂

[Tom]

Glad it’s all working 🙂

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

[Author]

Posts