Changing static/fixed header to scroll

[PrayersNApples]

Right now, whenever your scroll down my page, the header (with the navigation bar) stays static. Is there a way to change that so that the page just scrolls normally (with the header disappearing when you scroll down far enough?)

http://prayersandapples.com

[nutsandbolts]

Yep. Find this in your stylesheet:

.site-header {
background-color: #fff;
border-bottom: 1px solid #eee;
letter-spacing: 1px;
letter-spacing: 0.1rem;
position: fixed;
width: 100%;
z-index: 999;
}

And replace it with this:

.site-header {
background-color: #fff;
border-bottom: 1px solid #eee;
letter-spacing: 1px;
letter-spacing: 0.1rem;
width: 100%;
z-index: 999;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

Thanks! Worked like a charm 🙂 The only problem is now there's a white space between the navigation bar and and the site tagline on pages other than the home page (i.e.: http://prayersandapples.com/blog). Any way to get rid of that?

[PrayersNApples]

Just noticed: It looks fine on my work PC (using internet explorer). The white space is only appearing on my Mac (in Safari and FIrefox).

[PrayersNApples]

Wait never mind it's happening everywhere (sorry!) - I just wasn't seeing it right.

[nutsandbolts]

Find this in your stylesheet:

.site-tagline {
background-color: rgb(0, 51, 51);
background-color: rgba(0, 51, 51,.8);
margin-top: 60px;
margin-top: 6rem;
padding: 20px 0;
padding: 2rem 0;
}

And remove the margin-top rules to get this:

.site-tagline {
background-color: rgb(0, 51, 51);
background-color: rgba(0, 51, 51,.8);
padding: 20px 0;
padding: 2rem 0;
}

That should fix it but let me know if it messes up something else - sometimes CSS changes can cause a domino effect!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[PrayersNApples]

Is there anyways perhaps to fill that white space with my background image? Like they did here: http://www.oliviarosecosmetics.com/why-olivia-rose/ ? I wouldn't need the image above the navigation bar - just filling in the newly created white space. (Sorry for not getting all this in my first reply!!) 🙂

[PrayersNApples]

Perfect! Worked great! 🙂 Thanks so much!! 🙂

[Author]

Posts