-1

The header includes a simple large white title/logo, with a navigation right below it.

Then upon scrolling past the navigation, the header changes to a pink, semi-transparent bar with the title/logo on the left and a navigation to the right. It sticks to the top of the page as well.

HTML:

<header>

    <h2>The</h2>
    <h1>Catching Raindrops</h1>

    <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Quotes</a></li>
        </ul>
    </nav>

</header>

How do I go about this? I've searched everywhere I can think of, but haven't found any tutorials on how to change it the way I want to. I did find this: http://codepen.io/senff/pen/ayGvD which only makes it sticky.

And I don't know JS so can't really figure out how to change it, but this one seems to be the kind I'm looking for, where the class changes, so that I only have to add another class in the css and put all of the on-scroll changes there, am I right? If I am, how do I go about changing it for the logo and navigation? In this CodePen example, only one class has been used, which would only be able to change the navigation, and not the headers, right? Sorry if this sounds incredibly confusing. :/

And in this, the JS code targets selectors and changes the colors, but as I've explained above my changes are more complicated.

The layout for this page is how I want it to be like, only this tutorial confused me to no end :/

This is my CSS

header {
    font-family:'Steelfish';
    color: #FFF;
    margin: 10px 0 0 0;
}
header h1 {
    font-size: 90px;
    text-align: center;
    text-transform: uppercase;
}
header h2 {
    font-size: 40px;
    text-align: center;
    text-transform: uppercase
}
nav {
    font-size: 30px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px;
}
nav ul {
    margin:0;
    padding: 0;
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    padding: 0 10px 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
}
nav ul li a:hover {
    text-decoration: none;
    color: #9E9E9E;
    -webkit-transition: color 900ms ease;
    -moz-transition:color 900ms ease;
    -o-transition: color 900ms ease;
    transition: color 900ms ease;
}

Thank you in advance.

kei
  • 20,157
  • 2
  • 35
  • 62
Maira
  • 1
  • 1

1 Answers1

0

The last link is from my site and my tutorials are written for WordPress and Suffusion theme. This can be a reason for what the tutorial looks confusing. In WordPress jQuery library is already loaded and the theme have a markup which is reffered in tutorial.

But html/javascript/css works in WordPress exactly as in any other site, so, with some little adjustments the solution from my site will works for you too. You only need some minor changes for making your markup ready for trasformations.

For making this solution to work will need to link jQuery library in the head section of your page (and I also added here the needed jQuery function):

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$j=jQuery.noConflict();
$j(document).ready(function() {    
    var nav = $j('#nav');
            $j('#left-header').hide();
    $j(window).scroll(function () {
        if ($j(this).scrollTop() > 150) {
            nav.addClass("scroll-nav");
$j('#header').hide();
$j('#left-header').show();
        } else {
            nav.removeClass("scroll-nav");
$j('#header').show();
$j('#left-header').hide();
        }
    });
});
</script>
</head>

Then you have to make some small changes in your markup, mostly for naming your sections, but also for adding a new div which need to hold the small logo (#left-header div):

<body>
<header id="header">
    <h2>The</h2>
    <h1>Catching Raindrops</h1>
</header>

    <nav id="nav">
        <div id="left-header">The Catching Raindrops</div>
        <ul class="menu">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Quotes</a></li>
        </ul>
    </nav>
    <div id="just-for-testing" style="height:1000px;">&nbsp;</div>
</body>

The div with id #just-for-testing is added only for giving some height to the page otherwise you cannot scroll - replace that div with your real content. Finally, add in your stylesheet the CSS for navigation bar after scrolling:

.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;background:rgba(255,0,0,0.5);}
.scroll-nav ul.menu {float:right;}
#nav #left-header {float:left;font-size:80%;}
#nav #left-header a {background:none;}
#left-header {display:none;border:none;}
#left-header img {border:none !important;}

You can see, test and use all these changes in the fiddle linked below

http://jsfiddle.net/drake/bg2S4/

Hope it help

drake
  • 1
  • 3