nanam 0 Share Posted September 4, 2019 (edited) Hello, can someone please help with some code that would make the navigation bar and white background sticky on scroll? https://www.hellobrella.com Thank you! Edited September 4, 2019 by asjeffer Initial Revision Link to post
0 tuanphan 9,338 Solution Share Posted September 6, 2019 @asjeffer you can add top: -2px .Header { z-index: 9998; position: fixed; width: 100%; top: -2px; } You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 tuanphan 9,338 Share Posted September 5, 2019 @asjeffer Did you solve problem? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 nanam 0 Author Share Posted September 5, 2019 @tuanphan thank you for checking! I tried the following code, but you can see that the bar appears to be floating rather than fixed to the top of the screen...there is a gap above the nav bar/header through which you can see the content underneath as you scroll...do you have a fix for this or new code all together? Thanks again! .Header-inner { z-index: 9999; width: 100%; } .Header{ z-index: 9998; position: fixed; width: 100%; } @media screen and (max-width: 3000px) { .Index-page--has-image .Index-page-content { margin-top:104px !important; } } @media screen and (max-width: 500px) { .Index-page--has-image .Index-page-content { margin-top:0px !important; } } Link to post
0 nanam 0 Author Share Posted September 6, 2019 That fixed it @tuanphan thank you so much! Link to post
0 mariella 59 Share Posted December 12, 2019 @tuanphan can you share the code for your fix above? I'm also trying to accomplish a sticky on scroll effect for my primary nav using maple. Link to post
0 tuanphan 9,338 Share Posted December 12, 2019 26 minutes ago, mariella said: @tuanphan can you share the code for your fix above? I'm also trying to accomplish a sticky on scroll effect for my primary nav using maple. Can you share link to your site? You can send your question to my email to get faster answer. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
nanam 0
Hello, can someone please help with some code that would make the navigation bar and white background sticky on scroll?
https://www.hellobrella.com
Thank you!
Edited by asjefferInitial Revision
Link to post
Top Posters For This Question
3
3
1
Popular Days
Sep 5
2
Sep 6
2
Dec 12
2
Sep 4
1
Top Posters For This Question
nanam 3 posts
tuanphan 3 posts
mariella 1 post
Popular Days
Sep 5 2019
2 posts
Sep 6 2019
2 posts
Dec 12 2019
2 posts
Sep 4 2019
1 post
6 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment