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

Five: Keep header and navigation bar visible when scrolling?


jamesa

Question

Currently when I scroll down my website, my header image and navigation bar go away, which is annoying because I don’t want visitors to have to scroll all the way up to go to a different section of the website. I’d like my content to flow underneath a static header and navigation bar.

Any suggestions would be appreciated.

james-leslie-xq0u.squarespace.com

Edited by danieljs
retag
Link to comment
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

18 answers to this question

Recommended Posts

  • 5

Okay paste this in Custom CSS:


body.top-navigation-position-below-banner #navigation-bottom {
  position: fixed; 
  top: 0;
  border-bottom: none;
  z-index: 999;
} 

#page-header-wrapper { margin-top: 180px; }

Now for mobile fix:


@media screen and (max-width: 640px) {
  #page-header-wrapper { margin-top: 0 !important; }
} 

Edited by Nick Scola

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 2

Thanks Nick

I'm also working with Five - it didn't work as first then I changes a couple of things and its working a treat!

I'm only a novice but here's what I came up with -

body.top-navigation-position-above-banner #navigation-top {position: fixed; top: 0; border-bottom: none; z-index: 999;} #page-header-wrapper { margin-top: 10px; }

http://theyogaclass.com.au

Ti

Link to comment
  • 0

Well, first of all I want to thank you so much. I'm having a bit of an issue, however. It looks like my nav bar has gone above my header using this code and it bleeds into my posts when I scroll down. I haven't saved.

Is it possible to keep the header and nav bar's position fixed (like it is now) and have the content flow underneath -- so matter how far you scroll down the header and nav bar are always above the canvas and sidebars?

I can't tell you how much I appreciate your help.

Link to comment
  • 0

Oops I forgot to apply this code as well: z-index: 999; I've just updated the code.

The Hero image is the banner image. Your header is the navigation + sit logo.

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 0

Hey! You're almost there and you're awesome for helping me out. Haven't saved the code. That code puts the navigation bar above the header image, though. Are you able to update the code to keep the navigation bar below header image like it was before. If you can't, your code will work for me!

Link to comment
  • 0

@pixxbee thanks. Now what do you want to be fixed? Navigation? The logo + navigation? etc. I have an example on my site: http://www.nickscola.com scroll down and you'll see.

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 0

i basically want my social media buttons directly under the navigation links (blog, about us, contributers etc) and above the first blog post.

Exp


                                   PIXXBEE

-------------blog--about us--contributers-get you site on pixxbee------------------

Twitter button / facebook button

first blog post.second blog post etc..

the problem is when on the mobile version there are no social media icons untill you scroll past all the blogs since my desktop version has 2 columns. Mobile version shows the blogs as column 1 and social media as column 2.

Link to comment
  • 0

Okay for those buttons on the top left it will require some jQuery. Here's what I have in my code injection - header. Very simple. Now you just need to customize it a TAD to make the buttons be inline instead of a block:

http://pastebin.com/Fqai2sPP

A lot of ways to go about this with jQuery. I just went with one of the methods.

Edited by Nick Scola

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com
Link to comment
  • 0

Nick!

I'm trying to do this as well on the Five template at www.thealmanacmag.com. The code fixes the navigation but places it above the header.

Is it possible to keep the header and nav bar's position fixed (as it is now) and have the content flow underneath -- so the header and navigation bar are always above the canvas and sidebars?

Thanks so much for sharing your amazing skills!

M

Link to comment
  • 0

I am attempting to also add a navigation bar that follows as your scroll down. I am currently useing the Adversary template. I have tried inputting the above code but no luck so far.

Any help would be wonderful!

Thank you

Edited by mobel73
Link to comment
  • 0
On 7/30/2015 at 7:38 AM, Tiean said:

 

I'm only a novice but here's what I came up with -

body.top-navigation-position-above-banner #navigation-top {position: fixed; top: 0; border-bottom: none; z-index: 999;} #page-header-wrapper { margin-top: 10px; }

http://theyogaclass.com.au

Ti

This worked wonderfully! All I had to do was change the 10px at the end until it didn't cover the banner. Thanks so much!

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...