KarinaNa Posted October 14, 2019 Posted October 14, 2019 Hi all, I'd like to freeze or 'fix' my navigation bar in the Bryant template. Does anyone have any experience with this template and this task? I have tried about a dozen different CSS options in the Bryant Custom CSS box and to no avail. The site remains in trial mode (not yet live). This shouldn't matter, correct? Seems like a novice question, but as I've tried so many different codes out there and none are working I'm exploring all angles. Thanks so very much for any step-by-step directions. I'm sure this question has been answered many times but I'm not finding it!
brandon Posted October 14, 2019 Posted October 14, 2019 Hi @KarinaNa. In the case, of Bryant, it should be fairly straightforward. If you're primarily concerned with modern browsers, something simple like this, added via the CSS Editor, should do the trick: #header { position: -webkit-sticky; position: sticky; } If you want broader compatibility with older browsers, and if you don't mind some overlap of your header image, you can instead use: #header { position: fixed; } On a related note, on other templates based on Brine (not yours, but others may end up here looking), the number of concerns when creating a fixed header are much greater and include: differences between index and non-index pages, what headers (top/bottom) are enabled, whether the screen is resized, whether the announcement bar is used (and whether it's been closed), whether the header covers up content when anchor links are used, whether you want it fixed on mobile, whether you have the headers set to overlap on index pages, and more. To account for that complexity, I created Fixit - Fixed Headers for Squarespace. In my experience, many tutorials and code snippets fail to take one or more of those into account. In your case, the above should work. But I say all that in part so that, if you find anomalies in certain contexts (the announcement bar visibility being one of them), they are probably solvable. Just post back and include a link to your site and the view-only password for trial sites. Finally, custom CSS will be applied even for trial sites. Hope that helps. -Brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left)
Guest Posted November 12, 2019 Posted November 12, 2019 I tried this and it has an issue on mobile (all other solutions I've tried suffer the same problem): Scroll down the page a bit. Click on the nav burger. Now close the nav burger. You're back to the top of the page. On Slack's site (slack.com) you can see this happening as well (behind the nav menu), however they seem to have coded it so when you collapse the nav you get sent to page position you were at when you opened the nav.
brandon Posted November 17, 2019 Posted November 17, 2019 @jwharton: Give this a shot. I did not test it on actual mobile devices, so you'd want to do that after implementing: .mobile-nav-open #siteWrapper { position: static !important; } -Brandon If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left)
KarinaNa Posted November 24, 2019 Author Posted November 24, 2019 hi @brandon Thanks so much. I've added the code to the CSS editor but still no-go:/ The header on mobile is actually already static - built that way, fortunately. But the desktop version still remains an issue (I tried both pieces you offered - the one for current browsers and old) This issue MUST be related to the template! Though if you find anything, please let me know. Thank you Karina #header { position: -webkit-sticky; position: sticky; }
brandon Posted November 26, 2019 Posted November 26, 2019 Hi @KarinaNa. I've not re-tested this but you can always try adding "!important" on those rules (see above example). If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left)
MMEbyKiandraTrickett Posted February 19, 2021 Posted February 19, 2021 Super interested if anyone knows how to fix the MENU burger icon sticking up to the top right when scrolling on mobile. Doing my absolute head in. www.sparkproperty.com.au PW: enter When you scroll there will be a duplication of the word MENU..
tuanphan Posted February 22, 2021 Posted February 22, 2021 On 2/19/2021 at 6:07 PM, MMEbyKiandraTrickett said: Super interested if anyone knows how to fix the MENU burger icon sticking up to the top right when scrolling on mobile. Doing my absolute head in. www.sparkproperty.com.au PW: enter When you scroll there will be a duplication of the word MENU.. Add to Design > Custom CSS @media screen and (max-width:767px) { header#header { position: fixed !important; top: 0; left: 0; width: 100%; 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!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.