How to create fixed/sticky nav bar in Bryant template?

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!

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

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.

@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

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;
}

Hi @KarinaNa. I've not re-tested this but you can always try adding "!important" on those rules (see above example).

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..

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;
}
}