Changing static/fixed header to scroll

Community Forums Forums Design Tips and Tricks Changing static/fixed header to scroll

This topic is: resolved

Tagged: , ,

This topic contains 7 replies, has 2 voices, and was last updated by  PrayersNApples 8 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #73949

    PrayersNApples
    Member
    Post count: 35

    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
    #73995

    nutsandbolts
    Moderator
    Post count: 3104

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #74013

    PrayersNApples
    Member
    Post count: 35

    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?

    #74020

    PrayersNApples
    Member
    Post count: 35

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

    #74021

    PrayersNApples
    Member
    Post count: 35

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

    #74023

    nutsandbolts
    Moderator
    Post count: 3104

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #74026

    PrayersNApples
    Member
    Post count: 35

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

    #74039

    PrayersNApples
    Member
    Post count: 35

    Perfect! Worked great! :) Thanks so much!! :)

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Changing static/fixed header to scroll’ is closed to new replies.