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

Five: Keep header and navigation bar visible when scrolling?

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

Share this post


Link to post

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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

im actully thinking i might leave it how it is. but is there anyway to get the twitter and facebook buttons on the very top left of the page between the navigation bar and the first blog post?

Share this post


Link to post
  • 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.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Nick brother. it worked. Iv been trying to do this for a week. thank you so much. I know nothing about jQuery but you inspire me. Awesome work. I will be in touch with you maybe we can set something up on an "as-needed" basis and i can Paypal you or something.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Hi Nick! Don't suppose I could ask you for the same solution but for the Montauk Theme?

I've posted a new question here. Would really love to implement this on my website! :-)

Share this post


Link to post
  • 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!

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

Sign in to follow this  

×
×
  • Create New...