[Support request] Secondary Sticky Menu

[Jennifer]

Hello,

Is there a way to make the secondary menu sticky? I followed this code (https://generatepress.com/forums/topic/sticky-secondary-and-primary-menu/) and it worked for them but it is not working for me. I wish it was but it is not. It only sticks below 600px but anything above that it no longer sticks. Is there a reason why?

.navigation-stick + .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    right: 0;
    top: 55px; /* Adjust this number if needed */
}
@media (max-width: 768px) {
   .navigation-stick + .secondary-navigation {
    top: 55px; /* Adjust this number if needed */
}
@media (min-width: 769px) and (max-width: 1024px) {
   .navigation-stick + .secondary-navigation {
    top: 55px; /* Adjust this number if needed */
}
@media (min-width: 1025px) {
   .navigation-stick + .secondary-navigation {
    top: 55px; /* Adjust this number if needed */
}

Can you please help me to make the secondary menu sticky on all window sizes. Please know that our primary menu is sticky also.

Any help would be greatly appreciated.

I can send a video of what it is doing if you like.

[Elvin]

Hi,

Can you link us to the site in question?

You can provide the site details on the Private information text area.

Thank you. 🙂

[Jennifer]

Hello,

Oh great! I truly hope you can help. Here is a list of things.

1. the css code is under customize and additional css — this is where the secondary css code is
2. please know that the primary menu is to remain sticky as well as the secondary menu

Okay thank you for your help and time

[Elvin]

I see that you’re using an Elementor section for the second nav. It makes sense why the CSS is not working.

That said, go to your sticky section on Elementor and add 55px on both “Offset” and “Effects Offset” for Desktop and Mobile viewports.

Note: The offset value may be different for Tablet Viewport because your header’s main menu wraps under your logo. You may have to set 110px offset on tablet view due to this.

Alternatively, you can set the Mobile Menu Breakpoint of the main menu to 924px on Appearance > Customize > Layout > Primary Navigation so the menu turns into a hamburger toggle on tablet meaning it won’t wrap under your logo. This means the primary navigation’s height stays at 55px which means you don’t need the 110px offset value for tablet.

[Jennifer]

Hi Elvin,

On this page https://discoverybible.com/bible-app/ we are not using elementor for our menus. Also my initial support comment you will see that I did apply @media and the 55px within the CSS code.

Also, I have problems with secondary menu sticky from Generatepress.

Please read my first support comment.

Please do not include elementor.

I also changed the top: css and it is not taking the css code I implemented. Can you please help me fix why Generatepress secondary menu does not stay visible below 600px.

You should already have the login credentials.

Thank you

[Tom]

Hi there,

Try adding this:

.admin-bar .navigation-stick + .secondary-navigation {
    top: calc(55px + 32px);
}

The admin bar is adding to the fixed height of your navigation, so we need to add that to the calculation.

[Jennifer]

Hi Tom,

Thank you for the feedback. I added the css coding but it seems before 768px the secondary menu is all over the place. I am not sure how to fix this and why is it so hard to code to make it stay in one place consistently.

Any help would be great. I can even record a video for you to see the problems I am facing but if you just log in and go to this page https://discoverybible.com/faith-g4102-pistis-2/ and then view it in inspect view or responsive view, quickly you will see my situation.

.navigation-stick + .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    right: 0;
    top: 55px;
}
@media (min-width: 898px) {
 .admin-bar .navigation-stick + .secondary-navigation {
    top: calc(55px + 100px);
	}}
	@media (max-width: 899px) {
  .admin-bar .navigation-stick + .secondary-navigation {
    top: calc(55px + 44px);
}}
@media (max-width: 600px) {
  .admin-bar .navigation-stick + .secondary-navigation {
    top: calc(55px + 0px);
}}

Please please help me 🙂

Thank you
Jennifer

[Tom]

It mostly looks fine to me until it gets down to about 870px – that’s when your navigation drops down and increases the height of the nav.

If you increase your mobile menu breakpoint option to something around that value, it should fix that: https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

[Author]

Posts