Jive Factory: SVG Sprites & Styling the Header for Desktop

Topics covered in this Mobile & Responsive Web Design tutorial:

Adding SVG Sprites, Styling the logo & nav for various sizes/devices, Fixing opacity inheritance

Exercise Preview

Exercise Overview

Continuing with the Jive Factory site, in this exercise we’ll finish styling the header for tablets and desktops. Along the way you’ll learn how to use SVG for sprites.

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

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

   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 Header Partially Done folder.
   5. Duplicate the folder.
   6. Rename the folder to Jive.
2. In your code editor, open index.html (from the Jive folder).
3. Preview index.html in a browser.
4. Resize the browser window to the breakpoint for tablets (green border).

5. The header is almost done for tablets. The only thing left to do is add an icon above each of the four nav links, which we’ll do using sprites. If you’re already familiar with what sprites are and why we use them, skip over the following sidebar. If you’re new to sprites, read the following sidebar to learn more.

Adding SVG Icons as Sprites

1. Switch back to index.html in your code editor.
2. Starting around line 23, take a look at the nav and the links it contains.

3. We need an element to which we can add the sprite as a background image. We can use a span or div. We want the icons above the text, so div is a better choice. It’s a block element, so it will stack. Span is inline, so it would be next to the text and we’d have to add CSS to change the display to block, which is more work.

   Add the div tags shown below in bold:

   <li class="nav-shows">
       <a href="index.html" class="active">
          <div class="icon"></div> Shows
       </a>
   </li>
   <li>
       <a href="menu.html">
          <div class="icon"></div> Menu
       </a>
   </li>
   <li>
       <a href="directions.html">
          <div class="icon"></div> Directions
       </a>
   </li>
   <li>
       <a href="photos.html">
          <div class="icon"></div> Photos
       </a>
   </li>
   

4. We need a way to target each icon with CSS, so add the classes shown below in bold:

   <li class="nav-shows">
       <a href="index.html" class="active">
          <div class="icon"></div>Shows
       </a>
   </li>
   <li class="nav-menu">
       <a href="menu.html">
          <div class="icon"></div>Menu
       </a>
   </li>
   <li class="nav-directions">
       <a href="directions.html">
          <div class="icon"></div>Directions
       </a>
   </li>
   <li class="nav-photos">
       <a href="photos.html">
          <div class="icon"></div>Photos
       </a>
   </li>
   

5. Open main.css from the css folder.
6. Let’s start by applying the SVG as a background image for all icons, and giving it the size of an individual icon within the SVG file. In the min-width: 740px media query, find the header .logo rule, around line 112.

7. Below the header .logo rule, add the following:

   header .icon {
       background-image: url(../img/nav-icon-sprite.svg);
       height: 45px;
       width: 43px;
   }
   

8. Save the file.
9. Preview index.html in Chrome, Firefox, or Safari.

10. Look at the icons, and you’ll see the SVG sprite has scaled to fit our defined area. It also repeats because it’s a background image, so we see it multiple times. In it you can see all four icons.

    Currently there’s no width or height defined in the SVG file (because it was exported from Adobe Illustrator with the Responsive option checked on). Browsers don’t know how large to display it, so it scales up or down. We don’t want this scaling, so let’s add the original width and height (at which we designed the graphic) into the SVG file.

11. Switch back to your code editor.
12. From the img folder, open nav-icon-sprite.svg.

13. On line 5, add the following code shown in bold:

    viewBox="0 0 43 180" width="43" height="180"  enable-background="new 0 0 43 180"
    

    NOTE: We get those dimensions by looking at the viewBox attribute.

14. Save the file and close it.
15. Preview index.html in a browser to see the icons all now show the same musical note (which is the first icon in our sprite).
16. Switch back to main.css in your code editor.

17. To center the icons above the text, add the following code shown below in bold:

    header .icon {
        background-image: url(../img/nav-icon-sprite.svg);
        height: 45px;
        width: 43px;
        margin: auto;
    }
    

18. We need to adjust the background position of the sprite in order to show the appropriate icon for each link. This requires doing some math and knowing the layout of the sprite you made. We’ve already coded this up for you. From the snippets folder, open icon-bg-position.css.
19. Notice the rules change the position of the background. Only three icons need styling, because the first icon is already positioned properly!
20. Select and copy all the code.
21. Close the file.
22. You should now be back in main.css. Paste the new rules below the header .icon rule. (That’s around line 116, inside the min-width: 740px media query).
23. Save the file.

24. Preview index.html in a browser to see the icons should now be different.

Styling the Header for Desktop

1. Resize to desktop size (blue band), but keep the window narrow enough so the logo still has the text under it (although partially covering the logo).

   NOTE: As the layout stretches beyond 1300px wide, at some point the logo and address will fit next to each other, which isn’t actually bad, but in a later exercise we’ll be putting limits on the width of the page.

2. The logo still has a negative bottom margin that we used to make it overhang the navbar in the tablet layout. At this size, the negative margin pulls the text up onto the logo. In the min-width: 1024px media query, find the header rule, around line 161.

3. Below the header rule, add the following new rule to remove the bottom margin:

   header .logo {
      margin-bottom: 0;
   }
   

4. Let’s center everything in the header section. Add text-align to the header rule (directly above the header .logo rule) as shown below in bold:

   header {
      float: left;
      width: calc(25% - 20px);
      text-align: center;
   }
   

5. Save the file and preview index.html in a browser.

   The nav links can fit next to each other, which we don’t want. We want to make them stack with their icons on the left. The list items are currently set to display as inline-block from the tablet layout. Changing them to display as block will get them to stack.

6. Switch back to main.css and in the min-width: 1024px media query, find the header .logo rule around line 166.

7. Below the header .logo rule add the following new rule:

   nav ul li {
      display: block;
      margin-top: 15px;
   }
   

8. Save the file and preview index.html in a browser.

The nav has moved to the right because it’s still floating right from the tablet layout. We’ll have to remove that float.

1. Switch back to main.css and in the min-width: 1024px media query, find the nav ul li rule around line 169.

2. Above the nav ul li rule, add the following new rule:

   header nav {
      float: none;
   }
   

3. Save the file and preview index.html in Chrome, Firefox, or Safari. We’re getting closer. Next let’s move the icons to the left of the text.
4. Switch back to main.css and in the min-width: 1024px media query, find the nav ul li rule around line 172.

5. Below the nav ul li rule, add the following new rule:

   nav ul li .icon {
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
   }
   

6. Save the file and preview index.html in Chrome, Firefox, or Safari. We’re almost done! We want these nav links left aligned.
7. Switch back to main.css and in the min-width: 1024px media query, find the nav ul li rule around line 172.

8. Above the nav ul li rule add the following new rule:

   nav ul {
      text-align: left;
   }
   

9. Save the file and preview index.html in Chrome, Firefox, or Safari. The nav items are left aligned, but we want that whole section centered. Because the unordered list is a block item, it fills the width of its container. If we changed it to inline-block though its width would collapse to just the content. That inline-block item would then honor the text alignment of the header container, which is currently set to center!

10. Switch back to main.css and add the following to the nav ul you just created (around line 172):

    nav ul {
       text-align: left;
       display: inline-block;
    }
    

11. Save the file and preview index.html in Chrome, Firefox, or Safari. The desktop now has a nice looking nav. Resize through down to mobile and see how the nav looks great at any size!

Bonus: Fixing the Opacity of Nav Icons

1. Preview index.html in Chrome or Safari. (We’re going to see a weird issue that we’ve noticed in these browsers.)
2. Resize the layout to the desktop size (blue border) and notice that the active link (SHOWS) icon and text are white, while the other text/icons are gray. That’s exactly as we intended.
3. Resize the window to the tablet size (green border).

4. Notice that the nav icons here are all white. The right three icons should be gray, so what’s going on?

   When the links and their nested icon divs are both inline (desktop layout), the opacity is properly inherited and applied to the nested div. When the nested divs do not match the parent’s display type (tablet layout), the opacity is not being inherited. We’ll need to explicitly tell it to be inherited.

5. Switch to main.css in your code editor.
6. In the general styles, find the header nav li a rule around line 53.

7. Below the header nav li a rule, add the following new rule:

   header nav li a div {
      opacity: inherit;
   }
   

8. Save the file and preview index.html in Chrome or Safari. The icons should now properly inherit the opacity and match the color of the text!

Bonus: Fixing a Bug in IE & Edge

1. If possible, preview index.html in Internet Explorer or Microsoft Edge.

2. Notice that the logo looks fine at the mobile and phablet sizes, but at tablet and desktop size it gets squished (as shown below)!

   

   We set the CSS width directly on the SVG image, which typically works in IE and Edge, but not this time! We’ll need to specify the proper height to help them out. We could do this either in CSS or in the SVG file directly. We’ve already seen how to edit the SVG file, so this time let’s fix it via CSS.

3. Switch to main.css in your code editor.

4. In the min-width: 740px media query find the header .logo rule around line 115.

5. Add the height as shown below in bold:
   

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

6. Save the file and preview index.html in Internet Explorer or Microsoft Edge to see the logo is now the correct height again!