Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
KarinaNa

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

Question

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!

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

@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' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...