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 advance our work on the Jive Factory site by implementing a critical component of modern web design: a fully responsive header. We'll construct the HTML structure for the Logo & Navigation elements, then systematically apply CSS styling using a mobile-first approach. This methodology—starting with mobile constraints and progressively enhancing for larger screens—reflects current industry best practices and ensures optimal performance across all device categories.

You'll master the art of adaptive design as we craft distinct styling approaches for mobile phones, phablets, and tablets, each optimized for its unique interaction patterns and screen real estate.

1. If you completed the previous exercises, you can skip the following sidebar. We strongly recommend completing the previous exercises (2D–3B) before proceeding, as they establish the foundational structure we'll build upon. If you haven't finished them, follow the setup instructions below.

   Responsive Breakpoint Coverage

   Mobile

   479

   Phablet

   739

   Tablet

   1,023

   Desktop

   1,024

Adding the Header Content

To streamline your workflow and focus on the responsive design concepts, we've prepared the semantic HTML structure for the Logo & Navigation components. This approach mirrors real-world development scenarios where designers and developers collaborate using prepared markup libraries and component systems.

1. In your code editor, from the snippets folder open header.html.
2. Select all the code and examine its structure before copying.
3. Copy the selected code.
4. Close the file.
5. If index.html is not already open, open it now.
6. Locate the Logo & Nav placeholder text inside the header element (around line 13).
7. Replace the placeholder text by pasting the copied code.

8. Take a moment to analyze the semantic structure you've just integrated. Understanding markup architecture is crucial for responsive design success:

   • The first section features a class of company-info, containing the logo and a nested div with the details class that houses the address and business hours. This grouping enables flexible positioning across breakpoints.
   • The second section utilizes the semantic nav element containing a standard unordered list of links. This structure provides accessibility benefits and clear content hierarchy.
9. Save the file to preserve your progress.

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

    Now that we've implemented actual content, we can remove the temporary styling that was artificially expanding our layout modules.

11. Return to your code editor and open main.css from the css folder.
12. Around line 26, locate the .module rule.
13. Delete the line-height: 9; declaration, as it's no longer needed for visual reference.

14. Save the file.

Styling the Header for Mobile

We'll now implement the mobile-first responsive design approach—a methodology that has become the gold standard in modern web development. By starting with mobile constraints and progressively enhancing for larger screens, we ensure optimal performance and user experience across the entire device spectrum. This approach also aligns with Google's mobile-first indexing policies, making it essential for SEO success in 2026.

1. To accelerate your learning while maintaining focus on responsive design principles, we've prepared foundational CSS styles. In the snippets folder within your Jive directory, open header-mobile-styles.css.
2. Select and copy all the code.
3. Close the file and return to main.css.
4. Navigate to the PROJECT STYLES section.
5. Locate the body style rule around line 21.
6. Paste the copied styles immediately after the body rule.

7. Examine these foundational styles to understand the mobile-first strategy:

   • We begin with essential link styling and specific treatments for logo and details content, establishing a clean baseline for all devices.
   • The navigation styles include carefully considered padding, margins, and typography that work within mobile constraints while remaining scalable.
   • Notice our use of inline-block display instead of floats for horizontal layout. This modern approach provides superior flexibility across breakpoints and simplifies responsive behavior.
8. Save your changes.
9. Preview index.html in a browser to see the styled results.

10. Narrow the browser window to mobile width (red border indicator) and observe these design elements:

    • SHOWS displays in brighter white than other navigation links due to its active class, indicating the current page context—a crucial UX pattern for user orientation.
    • At mobile and phablet sizes, centered content alignment would improve visual balance and hierarchy.
    • For tablet and smaller screens, the header should span the full viewport width without the constraining outline, creating a more immersive experience.
11. Return to main.css to address these observations.

12. We need a media query targeting tablets and smaller devices. Above the existing @media (min-width: 740px) and (max-width: 1023px) rule, add this new media query:

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

13. Within that max-width: 1023px media query, add this header styling rule:

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

    NOTE: The negative margins create a "bleed" effect, extending the header beyond the body's padding constraints. Since the body has 25px top padding and 15px horizontal padding, we use equivalent negative margins to achieve full-width coverage. The 30px bottom margin provides optimal visual separation.

14. Save the file and refresh index.html in your browser.

    The centering is working correctly, but the border and margin adjustments aren't visible. This occurs because CSS specificity rules favor the more specific .module class over our generic header tag selector.

15. Increase the rule's specificity by modifying the selector in main.css:

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

    IMPORTANT: Ensure no space exists between header and .module—this creates a compound selector targeting elements with both the header tag and module class.

16. Save, return to the browser, and reload index.html.

    The header now properly extends to full width at mobile, phablet, and tablet breakpoints. At the mobile (red border) size, the navigation feels cramped. Since we're hiding the slideshow at this breakpoint, the upcoming shows list becomes the primary content. This makes the SHOWS navigation link redundant—removing it will improve spatial economy and reduce cognitive load.

Hiding the Shows Link on Mobile

Strategic content hiding based on screen size is a cornerstone of responsive design. By removing redundant elements at smaller breakpoints, we create cleaner, more focused user experiences while preserving functionality where space permits.

1. Switch to index.html in your code editor.

2. Around line 25, add a targeting class to the shows navigation item:

   <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 this rule after the .slideshow rule:

   .nav-shows {
      display: none;
   }

5. Save and refresh index.html in your browser.

6. Perfect! Now test the responsive behavior by resizing to the phablet breakpoint (yellow border). The SHOWS link reappears as intended. Keep your browser at phablet size to monitor the upcoming styling changes.

Styling the Header for Phablets

Phablet devices (480px-739px width) occupy a crucial middle ground in responsive design, offering enough screen real estate for enhanced spacing while maintaining touch-friendly interaction zones. This breakpoint often determines whether your design feels cramped or comfortable on popular devices.

1. Return to main.css.

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

   header nav li {
      margin: 0 15px;
   }

3. Save and refresh the browser. The improved balance is immediately apparent.

4. Expand the browser window to the tablet breakpoint (green border). Notice how the logo scales appropriately but can become oversized at the wider end of this range. This requires constraint to maintain visual hierarchy.

Styling the Header for Tablets

Tablet styling presents unique challenges, requiring balance between desktop-like functionality and touch-friendly interfaces. SVG logos provide perfect scalability, but without constraints, they can overwhelm the design at larger sizes.

1. In main.css, locate the header.logo rule in the general styles section (around line 30) and add a maximum width constraint:

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

2. Save and refresh index.html. The logo scaling is much improved.

   Test the mobile view by narrowing the browser completely. The logo becomes quite small, suggesting we need a minimum width constraint for optimal readability across all devices.

3. Add a minimum width property to the same header.logo rule:

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

4. Save and test across all breakpoints. The logo now maintains appropriate proportions throughout the responsive spectrum.

5. For reference, you can examine Jive > layouts > Layout2-Tablet.pdf to see the target design we're implementing.

6. Navigate back to main.css. In the (min-width: 740px) and (max-width: 1023px) media query (around line 121), override the centered alignment by adding this rule below the .shows rule:

   header.module {
      text-align: left;
   }

7. Save and refresh the browser to see the alignment change.

   Now we'll implement the sophisticated two-column layout shown in the PDF, with company information on the left and navigation on the right.

8. In the same min-width: 740px media query, add these floating rules below the body rule:

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

9. Save and refresh. The floated elements cause the header container to collapse—a common issue requiring the clearfix solution.

10. Switch to index.html and add the clearfix class to the header element:

11. Add the clearfix class to the header:

    <header class="module clearfix">

12. Save and refresh. The layout is restored, but the logo needs size adjustment for this breakpoint.

13. Return to main.css. In the min-width: 740px media query, add this logo sizing rule below the header nav rule:

    header.logo {
       width: 150px;
    }

14. Save and refresh to see the improved proportions.

    We're approaching the target design, but need to add the distinctive top border and spacing that creates the "band across the page" effect shown in the PDF.

    NOTE: Logo height issues in Internet Explorer or Microsoft Edge will be addressed in the next exercise.

15. In the (min-width: 740px) and (max-width: 1023px) media query, enhance the header.module rule (around line 135) with border and margin properties:

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

16. Save and refresh to see the band effect taking shape.

    The final touch involves creating the layered logo effect from the PDF design using negative margins—a advanced CSS technique that positions the logo outside the header band while maintaining document flow.

17. In the min-width: 740px media query, add negative margins to the header.logo rule (around line 112):

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

18. Save and refresh index.html. Excellent! The logo now creates the sophisticated layered effect shown in the professional layout. In the next exercise, we'll complete the tablet styling by adding iconography above the navigation links.