rschnell1 Posted August 16, 2019 Share Posted August 16, 2019 (edited) Wondering if anyone has CSS code to make sure my navigation remains fixed at the top of the browser on PC, as well as mobile. I know there are some out there, but looking for any that have been vetted. Thanks! Edited August 16, 2019 by rschnell1 Initial Revision Link to comment
0 Bill1965 Posted August 16, 2019 Share Posted August 16, 2019 (edited) I'm making the site 1800px max for now, so I put this: .Header (this will fix it in place) {position: fixed; (site width) width: 1800px; (not sure this is necessary) margin: 0; (so it's on top of all the layers) z-index: 1000;} My site is actually not 1800px wide, because I have side padding, but however the SP code was written, it disregards the padding amount and it works with matching the header size here to the site width. Now I got to figure out how to make it shrink down. Will post once I figure it out. If your site stretches all the way across, you can put "width: 100%;" Edited August 16, 2019 by Bill1965 Link to comment
0 tuanphan Posted August 17, 2019 Share Posted August 17, 2019 @rschnell1 Can you share site url? I don't see fixed menu on Brine Template Demo Email me if you have need any help (free, of course.). Answer within 24 hours. How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
0 rschnell1 Posted August 17, 2019 Author Share Posted August 17, 2019 my site is: robertschnellphotography.com I have not made any changes now though. Link to comment
0 tuanphan Posted August 17, 2019 Share Posted August 17, 2019 @rschnell1 Add to Home > Design > Custom CSS /* Fixed Top Header: Logo, Social Icon */ header.Header.Header--top { top: 0; left: 0; right: 0; z-index: 999; position: fixed; } /* Fixed Navigation */ header.Header.Header--bottom.Header--overlay { position: fixed; top: 70px; left: 0; right: 0; z-index: 999; } Email me if you have need any help (free, of course.). Answer within 24 hours. How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
0 SouthernSunEvents Posted July 10 Share Posted July 10 @tuanphan Trying to figure this out as well for mobile and tablet. http://www.southernsunevents.com PW: sse2020 Link to comment
0 tuanphan Posted July 11 Share Posted July 11 15 hours ago, SouthernSunEvents said: @tuanphan Trying to figure this out as well for mobile and tablet. http://www.southernsunevents.com PW: sse2020 I see you did for logo. Now you want do similar for both navigation & logo? Email me if you have need any help (free, of course.). Answer within 24 hours. How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
0 SouthernSunEvents Posted July 14 Share Posted July 14 On 7/11/2021 at 5:14 AM, tuanphan said: I see you did for logo. Now you want do similar for both navigation & logo? The logo and nav menu move down and overlaps everything while scrolling on mobile and tablet. Looking to keep them stuck at the top. Thanks! Link to comment
0 SouthernSunEvents Posted July 20 Share Posted July 20 (edited) On 7/14/2021 at 3:30 PM, SouthernSunEvents said: The logo and nav menu move down and overlaps everything while scrolling on mobile and tablet. Looking to keep them stuck at the top. Thanks! Still trying to tackle this one. I can't seem to keep the logo/nav sticky at the top. Anyone have any ideas? http://www.southernsunevents.com PW: sse2020 Edited July 20 by SouthernSunEvents Link to comment
0 tuanphan Posted July 22 Share Posted July 22 On 7/20/2021 at 7:56 AM, SouthernSunEvents said: Still trying to tackle this one. I can't seem to keep the logo/nav sticky at the top. Anyone have any ideas? http://www.southernsunevents.com PW: sse2020 Hi. Sticky on desktop only or tablet/mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
0 SouthernSunEvents Posted July 22 Share Posted July 22 3 hours ago, tuanphan said: Hi. Sticky on desktop only or tablet/mobile? tablet/mobile Link to comment
Question
rschnell1
Wondering if anyone has CSS code to make sure my navigation remains fixed at the top of the browser on PC, as well as mobile. I know there are some out there, but looking for any that have been vetted.
Thanks!
Edited by rschnell1Initial Revision
Link to comment
Top Posters For This Question
4
1
2
4
Popular Days
Aug 17
3
Aug 16
2
Jul 22
2
Jul 14
1
Top Posters For This Question
tuanphan 4 posts
Bill1965 1 post
rschnell1 2 posts
SouthernSunEvents 4 posts
Popular Days
Aug 17 2019
3 posts
Aug 16 2019
2 posts
Jul 22 2021
2 posts
Jul 14 2021
1 post
Posted Images
10 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