[Support request] Secondary Sticky Menu

Home Forums Support Secondary Sticky Menu

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

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1507076
    Elvin
    Staff
    Customer Support

    Hi,

    Can you link us to the site in question?

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

    Thank you. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1508601
    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

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1508665
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1511232
    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

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1511501
    Tom
    Lead Developer
    Lead Developer

    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.

    #1511602
    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

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1512687
    Tom
    Lead Developer
    Lead Developer

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.