Creating a Fixed Navbar & RGBA Color

Topics covered in this HTML & CSS tutorial:

Creating a fixed navbar on wider screens, RGBA color

Exercise Preview

Exercise Overview

In this exercise, you’ll create a fixed position navbar. We don’t want to waste valuable screen space on small screens, so we’ll only fix the navbar on larger screens. We’ll use media queries to style the navbar appropriately for different screen sizes.

Getting Started

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Tahoe Fixed Navbar folder located in Desktop > Class File > Advanced HTML CSS Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Tahoe Fixed Navbar folder.

4. Preview index.html in Chrome:

   • Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and select Inspect to open Chrome’s DevTools.

   • In the upper left of the DevTools panel click the Toggle device toolbar button to enter device mode.

   • From the device menu above the webpage, select iPhone 6/7/8.

   • Click the Reload button, or hit Cmd–R (Mac) or Ctrl–R (Windows).

5. We’re going to start by styling the mobile layout, and then work up to larger screens. This type of development is called “mobile first”.

   Leave the page open in the browser with the DevTools open, and return to your code editor.

Overriding Default List Styles

We semantically coded our navigation links as a list, but don’t want the bullets.

1. Open main.css from the css folder (in the Tahoe Fixed Navbar folder).

2. Below the h2 + p rule, add the following new rule:

   nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }
   

3. Save the file, return to Chrome, and reload the page.

   Now that we’ve removed the bullets and extra space, we want the list items to be in a horizontal row, rather than the vertical stack we have now.

4. Return to main.css in your code editor.

5. Below the rule for nav ul add the following new rule:

   nav li {
      display: inline;
   }
   

6. Save the file, return to Chrome, and reload the page.

   The three links under the logo should now all be in a line.

7. Return to main.css in your code editor.

8. Let’s center everything in the nav. Above the rule for nav ul add the following:

   nav {
      text-align: center;
   }
   

9. Save the file, return to Chrome, and reload the page.

   The logo and line of links should now be centered, but the links need to be styled.

10. Return to main.css in your code editor.

11. Below the rule for nav li add the following new rule:

    nav ul a {
       color: #fff;
       font-weight: 800;
       text-transform: uppercase;
       padding: 11px;
       display: inline-block;
    }
    

    NOTE: We have display: inline-block; so the padding will work the way we want it to.

12. Save the file, return to Chrome, and reload the page. That looks better!

Creating a Fixed Navbar on Larger Screens

We want the navbar to be fixed to the top of the browser window so it remains visible even as the user scrolls down. This can waste valuable screen space on small screens, so we’ll only do this for screens 600 pixels or wider.

1. In the upper left of the DevTools panel click the Toggle device toolbar button to leave device mode.
2. Close the Devtools.
3. Make the window fairly wide if it’s not already.
4. Switch back to main.css in your code editor.

5. At the bottom of the file, below all the other rules add the following:

   @media (min-width: 600px) {
      nav {
         position: fixed;
      }
   }
   

6. Save main.css and reload index.html in the browser.

7. Scroll through the page to see that the fixed header stays at the top of the page. However, notice the following issues we need to solve:

   • The fixed header has collapsed down to the minimum size required to hold the content, so it no longer stretches across the page like we want.
   • The Come Explore Tahoe! section that was previously below the header has moved up as far as it can, because the navbar was removed from the normal document flow.

8. We’ll solve the width issue by adding some coordinates. While we’re at it, let’s also add a dark background so it will be easier to see the navbar’s content as it scrolls over the page’s content.

   Switch back to main.css in your code editor.

9. Add the following bold code to the fixed header:

   @media (min-width: 600px) {
      nav {
         position: fixed;
         background: rgba(0,0,0, .6);
         top: 0;
         left: 0;
         right: 0;
      }
   }
   

   The hex colors we’ve been using are not transparent. A newer way to specify color is RGBA (Red Green Blue Alpha). RGBA has the same color spectrum as hex values. Each of the Red, Green, and Blue values uses a number between 0 and 255. When all values are 0, the color is black. When all values are 255, the color is white. Any other number combination equals a different color. A stands for Alpha, which specifies how transparent the color is. Alpha values range from 0 (100% transparent) to 1 (100% opaque). A decimal value is something in between (.6 is 60%).

   While hex values were eventually updated to support alpha (using 4 and 8 digit values instead of the standard 3 and 6), browser support is not as good as RGBA.

10. Save main.css and reload index.html in the browser.

    • The navbar should now have a transparent darker background and be the full width of the page.
    • Scroll down/up and notice how you can see the content through the semi-transparent navbar.
    • The Come Explore Tahoe! section (at the top of the page) is being covered up by the navbar To prevent that, let’s add some top margin to the body, which will push that content farther down the page, so it will be under the navbar when the page first loads.

11. Back in main.css, add the following bold code at the beginning of the media query:

    @media (min-width: 600px) {
       body {
          margin-top: 130px;
       }
       nav {
    

12. Save main.css and reload index.html in the browser:

    • The Come Explore Tahoe! section should no longer appear behind the navbar when the page first loads.
    • Resize the window in until you see the narrow mobile layout. Scroll down the page to see that the header does not stay fixed on narrow screens. Great!

Refining the Navbar Appearance on Larger Screens

On larger screens, the navbar is too tall with the logo above the links. Let’s move the logo to the left and the links to the right.

That means we don’t want the text aligned centered as it is on small screens. One way to fix this is to add a text-align: left; in the media query for larger screens. But that means we have to set text-align for both screen sizes. Instead, we add a new media query and make the text-align: center; only apply to smaller screens.

1. Find the nav rule that sets text-align: center; It’s not the one in the media query, it’s higher up in the code.
2. Select the entire nav rule and cut it. Be sure to cut it (not copy) so it will be removed from its current location.

3. Above the min-width: 600px media query, add a new max-width shown below in bold (note that it’s max and not min):

   @media (max-width: 599px) {
   
   }
   @media (min-width: 600px) {
   

   NOTE: Notice the 599px media query is one pixel less than the 600px media query? If they were both 600px, then both media queries would apply for screens that are exactly 600 pixels wide. Making them one pixel different ensures that only one set of styles will be applied!

4. Inside the new media query paste the nav rule so you end up with the following:

   @media (max-width: 599px) {
      nav {
         text-align: center;
      }
   }
   @media (min-width: 600px) {
   

5. Save main.css and reload index.html in the browser.

   The nav should be left aligned on large screens, and centered on small screens.

6. Switch back to main.css in your code editor.

7. Now we can move the links to the right. In the min-width: 600px media query, below the nav rule, add the following bold code:

   @media (min-width: 600px) {
      body {
         margin-top: 130px;
      }
      nav {
   

   Code Omitted To Save Space

      }
      nav ul {
         float: right;
      }
   }
   

8. Save main.css and reload index.html in the browser.

   • Make sure the window is large, so you see the fixed navbar.
   • The links should be on the right, with the logo on the left.
   • The navbar needs some padding so the logo and links don’t hit the edge.
9. Return to your code editor.

10. In the min-width: 600px media query, below the nav rule add the following bold code:

    nav {
       position: fixed;
       background: rgba(0,0,0, .6);
       top: 0;
       left: 0;
       right: 0;
       padding: 20px;
    }
    

11. Save main.css and reload index.html in the browser.

    The navbar should now look good at any screen size!

Optional Bonus: Add a Hover State to the Nav Links

Let’s add a hover to the links in the navbar. While mobile users won’t see the hover effect, desktop users can.

1. Return to your code editor.

2. Below the nav ul a rule (higher up in the code, not in a media query), add the following code:

   nav ul a:hover, 
   nav ul a:focus {
      background: #2fb3fe;
   }
   

   NOTE: Notice that the comma separated selectors are on two different lines? While we could have kept them on the same line, it’s easier to read with them on two lines. CSS still treats it as one selector even though they are on different lines!

3. Save main.css and reload index.html in the browser.

   • Hover over the links to see a blue background appears.
   • Because we used the same styling for the focus state, users that keyboard navigate the page will see the same effect when a link is selected via the keyboard.