3-CSS Navbar

Video

Navbar Starting Code

Let's add some of the code for the Navbar:

nav {
    color: #000;
    font-size: 1.7em;
    letter-spacing: 0.04em;
    padding: 1.0em 1.0em 0.5em;
    margin: 1.0em 0 ;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
    margin: 0;
}
nav li a, nav li a:visited {
    text-decoration: none;
    color: #C64322;
    padding: 0.3em 0.6em;
}
nav li a:hover {
    color: #C64322;
    background-color: rgba(252,251,243,0.75);
}

Here's how the app should look at this time: Would you look at that! It is actually starting to look like something made in this millennium!

contentWrapper Class

Let's make it so that the content isn't right up against the edge of our screen by using the Content Wrapper CSS. Go to your index.html file and add a <div> in the header that corresponds to the contentWrapper code. Notice that we add plus symbols for the items that you'll need to add:

<header>
    <div class="contentWrapper"> 
        <!--Login menu-->
        <nav> 


        </nav>
        <!--Navigation Menu-->
        <nav>


        </nav>
    </div>
</header>

Let's add that same wrapper in the sidebar section:

    <section id="sidebar">
        <div class="contentWrapper"> 

        </div>
   </section>

Notice how the margins have changed and the code has some spacing from the edge:

More Navbar code

Let's keep moving through the rest of the navbar CSS for our Nav Bar. Let's work on this Utility Menu. We need to move it over to the top right corner and put some shading in:

First, let's add the utilityMenu id to our HTML to target the menu:

<header>
    <div class="contentWrapper"> 
        <!--Login menu-->
        <nav id="utilityMenu"> 
        </nav>
        <!--Navigation Menu-->
        <nav>
        </nav>
    </div>
</header>

Let's also add a class to a few of the <li> elements. We will use these classes to write CSS that will allow us to hover over an item:

    <nav id="utilityMenu"> 
        <ul>
            <li class="acctNav"><a href="#" class="active">Login</a></li>
            <li class="acctNav"><a href="#">My Basket</a></li>
            <li><input type="search" id="search" placeholder="Search" /></li>
        </ul>
    </nav>

More CSS

Then, let's start working on the rest of our CSS Nav code. Some of this gets explained in the video, some is intuitive, and some will require you doing some tinkering. This code will got below the CSS Navbar code that we did above:

nav#utilityMenu {
    float: right;
    margin: -1.5em 0 0 0;
    padding: 0.35em;
    background-color: rgba(64,54,47,0.8);
    height: 1.3em;
}
nav#utilityMenu li {
    padding: 0 0.25em 0 0.2em;
    vertical-align: middle;    
}
nav#utilityMenu ul li.acctNav a, nav#utilityMenu ul li.acctNav a:visited {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    height: 1.3em;
    padding: 0.5em;
    margin: -0.4em 0 0 0;
    font-size: 0.8em;
}
nav#utilityMenu ul li.acctNav a.active {
    background-color: #C64322;
}
nav#utilityMenu ul li.acctNav a:hover {
    background-color: rgba(252,251,243,0.7);
    color: #C64322;
}
nav#utilityMenu li a, nav#utilityMenu li a:visited { padding: 0;}
nav#utilityMenu li a:hover { background-color: transparent;}
nav#utilityMenu ul li input#search {
    vertical-align: middle;
    margin: 0 0 0 1.0em;
}
nav#utilityMenu ul li.acctNav::before, nav#utilityMenu ul li input#search::before {
    content: "| ";
    color: #FCFBE6;
}

As before, go ahead and go in and tinker with some of the values in this code. Learning will come as you experiment with the code. At this point the app should be looking like this: