Home › Forums › Gillion Theme › Make the top bar navigation stay when scrolling
Home › Forums › Gillion Theme › Make the top bar navigation stay when scrolling
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
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; }
This does not solve this issue. Now it it still disappears but there is a gap at the top of the page –
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?
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.
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.
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.”?
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?
This is wonderful, you are fantastic! Thank you for the quick and excellent service.
Resolved 🙂
You are always welcome here 🙂