Jive Factory: Starting the Header

Topics covered in this Mobile & Responsive Web Design tutorial:

Adding the logo & nav content, Styling the logo & nav for various sizes/devices

Exercise Preview

Exercise Overview

In this exercise, we’ll continue working on the Jive Factory site. We’ll add the HTML for the Logo & Nav and add the CSS for mobile. Then we’ll style the header for phablets and tablets.

1. If you completed the previous exercises, you can skip the following sidebar. We recommend you finish the previous exercises (2D–3B) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (2D–3B)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > yourname-Mobile and Responsive Class.
   3. Delete the Jive folder if it exists.
   4. Select the Jive Background Done folder.
   5. Duplicate the folder.
   6. Rename the folder to Jive.

Adding the Header Content

To save you some time, we’ve already written the HTML code for the Logo & Nav. Let’s copy and paste it into our file.

1. In your code editor, from the snippets folder open header.html.
2. Select all the code.
3. Copy it.
4. Close the file.
5. If index.html is not already open, open it now.
6. Select the Logo & Nav placeholder text inside the header (around line 13).
7. Paste the code, replacing the Logo & Nav placeholder text.

8. Take a moment to look over the code. There are two main sections you just pasted into the header:

   • The first section has a class of company-info. Inside the company-info div is a logo and a child div with the class details that contains the address and business hours.
   • The second section is a nav element which contains a standard list of links.
9. Save the file.

10. Preview index.html in a browser to see the unstyled content.

    Now that we have real content, it’s time to remove the line-height we added to temporarily make the modules taller.

11. Return to your code editor and open main.css (from the css folder).
12. Around line 26 find the .module rule.
13. Remove the line-height: 9; line of code.

14. Save the file.

Styling the Header for Mobile

Let’s add some general styles for the header. We are building with a mobile first approach, so these initial styles will make sure the header and its content look good on a small screen. We’ll then modify these styles for larger screens as need be.

1. We’ve already created a file with some starter CSS in it for you to save time. In the snippets folder (in the Jive folder) open header-mobile-styles.css.
2. Select all the code.
3. Copy it.
4. Close the file.
5. You should be back in main.css.
6. In the PROJECT STYLES section, find the body style (around line 21).
7. Paste the styles you just copied after the body style.

8. Take a moment to look over the styles:

   • We start with a basic style for links and some specific styles for the logo and details content in the header.
   • In addition to some styles for adjusting the padding and margins of the navigation, there are some specific styles for the font-family and color of the links in the nav.
   • Rather than using floats to achieve side-by-side content, we’re displaying elements as inline-block, which will afford us more flexibility with styles across breakpoints.
9. Save the file.
10. Preview index.html in a browser.

11. Make the browser window narrow (red border) so you can see the styles for mobile devices. Notice the following:

    • SHOWS is a brighter white than the other links. This link has an active class to indicate that this page is all about upcoming shows.
    • At the mobile (red border) and phablet (yellow border) sizes, the header section would look better with the content centered.
    • For the tablet and smaller screens, we don’t want the outline around the header. That section should be the full width and start at the top of the page.
12. Return to main.css.

13. We don’t have a media query that targets tablets and smaller, so we’ll need to create one. Above the @media (min-width: 740px) and (max-width: 1023px) media query, add the following new media query:

    @media (max-width: 1023px) {
    
    }
    

14. In that max-width: 1023px media query, add the following new rule:

    header {
       text-align: center;
       margin: -25px -15px 30px;
       border-width: 0 0 1px 0;
    }
    

    NOTE: We’re using negative margins to pull the header out and over the padding that surrounds the page. The body has 25px top padding and 15px left/right padding, so we’re using negative margins equal to those padding amounts! The 30px bottom margin is an amount that looks good for this design.

15. Save the file, return to the browser, and reload index.html.

    The centering worked, but why didn’t the border and margin change? Those attributes are applied via the module class. In CSS, class rules are more specific, and therefore override tag rules. We’ll need to increase the specificity of this rule for it to work.

16. Return to main.css and add .module to the rule’s selector:

    header.module {
       text-align: center;
       margin: -25px -15px 30px;
       border-width: 0 0 1px 0;
    }
    

    NOTE: The module class is assigned to the header element in the markup, so make sure there is no space between header and .module!

17. Save the file, return to the browser, and reload index.html.

    Now the header should nicely fill the top of the page at mobile, phablet, and tablet sizes. We’ll finish the tablet and desktop sizes later.

    At the mobile (red) size the nav text is a bit cramped. We are hiding the slideshow content here in the mobile breakpoint, so the first piece of content users will see is the list of upcoming shows. Given this, we can probably just get rid of the SHOWS link in the nav. It seems redundant.

Hiding the Shows Link on Mobile

1. Return to your code editor and switch to index.html.

2. Around line 25, add the following class to the list item for the shows link:

   <li class="nav-shows">
      <a href="index.html" class="active">
         Shows
      </a>
   </li>
   

3. Save the file and switch to main.css.

4. In the max-width: 479px media query (around line 77), add the following new rule after the .slideshow rule:

   .nav-shows {
      display: none;
   }
   

5. Save the file, return to the browser, and reload index.html.

6. Looking good. Now resize the browser to the next breakpoint (yellow border). The link for SHOWS reappears, excellent. Keep the browser at the phablet size (yellow border) so we can track our changes to the CSS as we modify the header a bit more for this breakpoint.

Styling the Header for Phablets

Our phablet styles target devices with widths between 480px and 739px. These devices are wider, so we can give the links in the navigation more breathing room.

1. Switch back to main.css.

2. In the min-width: 480px media query (around line 85), add the following new rule after the body rule:

   header nav li {
      margin: 0 15px;
   }
   

3. Save the file, return to the browser, and reload index.html. The balance is better.

4. Resize the browser window wider to get to the next breakpoint for tablets (green border). The logo is scaling up a bit too much here, especially as you approach the widest point of this breakpoint (1023px). Keep the browser here (green border). We have some work to do.

Styling the Header for Tablets

The logo can get a bit too large, but setting a max-width should do the trick. We’re using an SVG image here, so it is built to scale beautifully. In this usage though, ideally it would never be larger than 150 pixels.

1. Return to main.css, and in the general styles, find the rule for header .logo (around line 30), and add the following property declaration:

   header .logo {
      display: inline-block;
      width: 25%;
      max-width: 150px;
   }
   

2. Save the file, return to the browser, and reload index.html. Better.

   Take a moment to make the window as narrow as you can. Note how small the logo becomes. We’ve set a max-width to ensure the logo is balanced with the layout, we may as well set a min-width to do the same.

3. Return to main.css, and add the following property declaration to the rule for header .logo in the general styles:

   header .logo {
      display: inline-block;
      width: 25%;
      max-width: 150px;
      min-width: 100px;
   }
   

4. Save the file, return to the browser, and reload index.html.

   The logo size is much improved in the mobile, phablet, and tablet styles. Resize the browser to the breakpoint for tablets (green border). We’re going to create a dramatic change to replicate the provided PDF layout.

5. If you like, you can go to Jive > layouts and open Layout2-Tablet.pdf for reference.
6. Return to main.css.

7. We no longer want to center the content in the header. In the (min-width: 740px) and (max-width: 1023px) media query (around line 121), add the following code below the .shows rule:

   header.module {
      text-align: left;
   }
   

8. Save the file, return to the browser, and reload index.html.

   Now let’s float the logo/details to the left, and the nav to the right. The logo/details section of the header has the class .company-info.

9. Return to main.css and, in the min-width: 740px media query, add the following new rules below the body rule:

   .company-info {
      float: left;
   }
   header nav {
      float: right;
   }
   

10. Save the file, return to the browser, and reload index.html. Yikes, the floats have caused the header to collapse. Let’s use the industry-standard clearfix class (provided in the starter CSS) to fix this.
11. Return to your code editor and switch to index.html.

12. Add the following class to the header:

    <header class="module clearfix">
    

13. Save the file, return to the browser, and reload index.html. Better, but the logo is looking too small.

14. Return to your code editor and switch to main.css. In the min-width: 740px media query, add the following code below the header nav rule:

    header .logo {
       width: 150px;
    }
    

15. Save the file, return to the browser, and reload index.html.

    It’s a lot closer to the provided PDF layout but we need to add a top border and some space above it so it looks like a band across the page.

    NOTE: If you notice the logo is the wrong height in Internet Explorer or Microsoft Edge, don’t worry about that for now. We’ll fix it in the next exercise.

16. Return to main.css. In the (min-width: 740px) and (max-width: 1023px) media query, add the following code to the header.module rule (around line 135):

    header.module {
       text-align: left;
       border-top-width: 1px;
       margin-top: 10px;
    }
    

17. Save the file, return to the browser, and reload index.html.

    We’re getting close! Now let’s create the effect from the provided layout that has the logo layered outside the band of the header. We can do this with negative margins.

18. Return to main.css. In the min-width: 740px media query, add the following property to the header .logo rule (around line 112):

    header .logo {
       width: 150px;
       margin: -35px 0;
    }
    

19. Save the file, return to the browser, and reload index.html. Sweet! In the next exercise, we’ll add icons above the navigation links at this tablet breakpoint.