Five: Keep header and navigation bar visible when scrolling?

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

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

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.

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.

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!

Nevermind it works! thank Nick!!!!!!!

Nick,

I am also trying to do this for my site. I paste the code into css but am not getting any results.Any help would be awesome.

Thanks!J

@pixxbee, could be the template you're using. What is your URL?

pixxbee.com thanks bro any help would be awesome

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

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?

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.

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.

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.

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

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

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

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! :-)

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!