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
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
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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
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
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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 10, 2021 Share Posted July 10, 2021 @tuanphan Trying to figure this out as well for mobile and tablet. http://www.southernsunevents.com PW: sse2020 Link to comment
tuanphan Posted July 11, 2021 Share Posted July 11, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 14, 2021 Share Posted July 14, 2021 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
SouthernSunEvents Posted July 20, 2021 Share Posted July 20, 2021 (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, 2021 by SouthernSunEvents Link to comment
tuanphan Posted July 22, 2021 Share Posted July 22, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 22, 2021 Share Posted July 22, 2021 3 hours ago, tuanphan said: Hi. Sticky on desktop only or tablet/mobile? tablet/mobile Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment