Make the top bar navigation stay when scrolling

Home Forums Gillion Theme Make the top bar navigation stay when scrolling

Home Forums Gillion Theme Make the top bar navigation stay when scrolling

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    RESOLVED Posts
  • Dominique_NE
    Participant

    Hi, How do I keep the top bar menu to stay when you scroll?

    Hi @Dominique_DF,

     

    Thank you for your question.

     

    Do you mean the Top bar as shown in the attached screenshot?

     

    Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    Dominique_NE
    Participant

    Hello, I want to make the very top bar, it is currently black, and above the main nav. The URL is http://dfdev.co.za/

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .sh-header-top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
    
    header.primary-desktop {
        margin-top: 50px;
    }
    
    #page-container .sh-header.sh-sticky-header.sh-sticky-header-active {
        top: 46px !important;
    }

    Dominique_NE
    Participant

    This does not solve this issue. Now it it still disappears but there is a gap at the top of the page –

     

    Attachments:
    You must be logged in to view attached files.

    The shared CSS code should work fine as shown in the attached screenshot.

     

    I visited your site to troubleshoot the issue but didn’t see the CSS code used anywhere on the site.

     

    Could you please tell me where you are using it?

    Attachments:
    You must be logged in to view attached files.

    Dominique_NE
    Participant

    Hi thank you. Tell me, I already have custom code in the settings. What do I need to do to separate that code from this code which you have given me?

    Do I just leave  space between? So sorry for the basic questions but I would like to be sure. Thank you again.

    Yes just keep space between the code and don’t add code in the middle of your existing code.

    Dominique_NE
    Participant

    I have done this and still not working. It makes a gap between the header and the top of the page.

    I can see it is working fine on your shared site as shown in the attached screenshot.

     

    Please test it on different browser or clearing your browser cache.

    Attachments:
    You must be logged in to view attached files.

    Dominique_NE
    Participant

    The correct URL is http://www.pomerolpartners.com

     

    I don’t see the shared CSS code used on your site https://pomerolpartners.com/ so could you please tell me where you have added it?

     

    Also would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by adding them in the box having text “Click here to share private content. Only you and forum moderators will be able see it.”?

    Dominique_NE
    Participant

    Hi,

    Yes please troubleshoot for me. I have tried the code, but the top black menu still does not stay. It also makes a space between the main menu.

    Thank you

     

    Solution for this topic

    Due to CSS specificity issue the above shared CSS code was not working on your so I changed it to below CSS code to make it work.

     

    .sh-header-top {
        position: fixed  !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
    
    header.primary-desktop {
        margin-top: 50px;
    }
    
    #page-container .sh-header.sh-sticky-header.sh-sticky-header-active {
        top: 46px !important;
    }
    
    .admin-bar .sh-header-top {
        top: 32px;
    }
    
    .admin-bar #page-container .sh-header.sh-sticky-header.sh-sticky-header-active {
        top: 78px !important;
    }

     

    Could you please test it now clearing your browser cache?

     

     

    Dominique_NE
    Participant

    This is wonderful, you are fantastic! Thank you for the quick and excellent service.

    Resolved 🙂

    You are always welcome here 🙂

Viewing 16 posts - 1 through 16 (of 16 total)