7-Navbar Style

Key Objectives

• To start using our build tools to work with HTML and CSS changes.

• To gain a deeper understanding of CSS and Bootstrap through using the tools.

• To begin creating a customized look, feel, and functionality for our navbar.

• Practice using gulp for faster site construction.

Video

Overview

In this module, we start to refactor what we've already stubbed out. This is the time that we'll make custom changes to our application in our navbar. Using our Sass + gulp tasks, we can now more quickly make adjustments to our site.

Notes/Tips

• The final code is listed at the bottom of the module. Feel free to copy and paste it into your project if you are struggling, but make sure you understand what it is doing.

• As discussed in the video, there is something called a hamburger menu. You might want to figure out what this term means and play around with it.

Steps

1. Watch the instructional video.

2. Do some research and find at least one change you could make to improve your navbar.

3. Implement the change.

4. Commit and push your code.

5. Move on to the next module.

6. Here's the final code.

   • index.html changes

     • Navbar

       <!-- Navigation -->
       <nav class="navbar navbar-default" id="main-nav" role="navigation">
         <div class="container">
             <div class="navbar-header">
                 <button type="button" class="navbar-toggle bg-primary text-white rounded" data-toggle="collapse" data-target=".navbar-collapse"
                     aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand text-uppercase navbar-left" id="developer-name" href="#">EFA Starter Template</a>
             </div>
       
             <div class="navbar-collapse collapse">
                 <ul class="nav navbar-nav navbar-right nav-choices">
                     <li class="active">
                         <a href="#">Home</a>
                     </li>
                     <li class="active">
                         <a href="#portfolio">Portfolio</a>
                     </li>
                     <li class="active">
                         <a href="#about">About</a>
                     </li>
                     <li class="active">
                         <a href="#contact">Contact</a>
                     </li>
                 </ul>
             </div>
         </div>
       </nav>

     • Header

       <!-- Header -->
       <header class="jumbotron text-center" id="main-header">
         <div class="container">
             <h1 class="jumbotron-heading">Coder Portfolio</h1>
             <p class="lead text-muted">Some text. A tag line. A lorem ipsum for now. More text that shows some sort of call to action.</p>
             <p>
                 <a href="#" class="btn btn-primary" id="header-action">Press here for something.</a>
             </p>
         </div>
       </header>

     • Portfolio - just change the first line

       <section id="portfolio">

     • About - just change the first line

       <section id="about" class="bg-primary text-white">

     • Contact - just change the first line

       <section id="contact">

   • _header.scss

     /* CSS code for the Header section. */
     #main-header {
       height: 400px;
     }
     
     /* Bootstrap overrides */
     .jumbotron-heading {
       padding-top: 50px;
     }
     
     #header-action {
       margin-top: 30px;
     }

   • _navbar.scss

     /* CSS code for the Navbar section. */
     /* Styling for the navbar */
     /* X idea comes from this codepen: https://codepen.io/canarystudio/pen/MygmQp */
     /* Uses the rotate to turn the bottom and top icon-bars to 45 degree x's.MIddle opacity is 0, so it's hidden. */
     
     #main-nav {
       padding-top: 2rem;
       padding-bottom: 1rem;
     
       border-bottom: none;
       background: transparent;
     
       /* Hover for the whole nav.*/
       &:hover {
       background: transparent;
       }
     
       .icon-bar {
       width: 22px;
       left: 3px;
       transition: all 2.2s;
       position: relative;
     
       &:nth-child(2) {
           transform: rotate(45deg);
           transform-origin: 10% 10%;
       }
       &:nth-child(3) {
           opacity: 0;
       }
       &:nth-child(4) {
           transform: rotate(-45deg);
           transform-origin: 10% 90%;
       }
       }
     
       &.collapsed {
     
       .icon-bar {
           left: 0;
     
           &:nth-child(2) {
           transform: rotate(50);
           }
           &:nth-child(3) {
           opacity: 1;
           }
           &:nth-child(4) {
           transform: rotate(0);
           }
       }
       }
     }

   • _variables.scss

     /* Variables used throughout will go here. */
     /* EFA Color pallete */
     $red: #D9514E;
     $orange: #f79569;
     $yellow: #F6D57A;
     $green: #8acfba;
     $blue: #86bad3;
     $blue-green: #9AD0D5;
     $purple: #A992BC;
     $brown: #725b4d;
     $gray: #53565A;
     $black: #000 !default;