9.3 Student Activity

Build a Responsive Navigation Bar Using Flexbox

  1. Step 1:

    • HTML Structure: Create an HTML file (flex-navbar-9.2.html) with a navigation bar that includes a logo and links:

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="basic.css" />
    <link rel="stylesheet" href="index.css" />
    <style>
    
      body {
        font-family: Arial, sans-serif;
      }
      @media screen and (max-width: 600px) {
        .container {
          flex-direction: column;
          gap: 10px;
        }
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="logo">My Logo</div>
      <div class="home">Home</div>
      <div class="about">About</div>
      <div class="contact">Contact</div>
    </div>
  </body>
</html>

  2. Step 2:

    • Using Flexbox for Layout:

      • The .container uses Flexbox to arrange the logo and the div elements side-by-side on larger screens.

      • Set align-self to flex-end, flex-center, or flex-start to see the effect.

      • For smaller screens, media queries are used to stack the items vertically.

  3. Step 3:

    • Responsive Behavior: Test the layout by resizing the browser window. The layout should adjust from a horizontal layout on larger screens to a vertical stack on smaller screens.

  4. Step 4:

    • Use css-studentactivity-9.2.html to scale the flex-nav-links items individually using CSS styles of container class in index.css :

    • Adjust height and width properties to change the size of nav menu item (Home, About, Services, Contact)

    • Inspect the changes to the layout by resizing the value of the Height property of the container class attribute to less than 100%.

// HTML : css-studentactivity-9.2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="basic.css" />
    <link rel="stylesheet" href="index.css" />
    <title>Flexbox Navbar</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      .flex-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #280e7b;
      }
      .logo {
        color: white;
        font-size: 24px;
      }
      .flex-nav-links {
        display: flex;
        gap: 5px;
      }
      .flex-nav-links a {
        color: white;
        text-decoration: none;
        font-size: 18px;
      }
      .flex-nav-links a:hover {
        text-decoration: underline dotted yellow;
      }
      @media screen and (max-width: 600px) {
        .flex-navbar {
          flex-direction: column;
        }
        .flex-nav-links {
          flex-direction: column;
          gap: 10px;
        }
        .container {
          flex-direction: column;
          gap: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="flex-navbar">
      <div class="logo">My Logo</div>
      <div class="flex-nav-links container">
        <div class="home"><a href="#">Home</a></div>
        <div class="about"><a href="#">About</a></div>
        <div class="services"><a href="#">Services</a></div>
        <div class="contact"><a href="#">Contact</a></div>
      </div>
    </nav>
  </body>
</html>
//CSS Code : index.css
/* Additional CSS code */
.container {
  border: 5px solid #e76f33;
  display: flex;
  flex-direction: row; /*column, row(default) */
  justify-content: space-between; /* center, end,space-between, space-around, flex-end */
  align-items: normal; /*normal, center, flex-end; /* stretch;/*flex-end */
  background-color: #e7dfd8;
  text-align: center;
  height: 30%;
  width: 70%;
}

.home {
  flex: 1; /*1 50%; */

  /*height: 100%; */
  /*align-self: flex-start;*/
  background-image: linear-gradient(
      rgba(33, 102, 242, 0.8),
      rgba(255, 255, 0, 0.8)
    ),
    url("../Flex-image-grid/img/normal1.jpg");
}
.about {
  flex: 1; /*1 1 100%;*/

  /* align-self: flex-center; */
}
.services {
  flex: 1; /* 1 50%; */

  /* align-self: flex-end;*/
}
.contact {
  flex: 1; /* 1 50%; */

  /* align-self: flex-end; */
}
// CSS code: base.css
.container div {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #f9f8f6;
}
body {
  margin: 0;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
  background-color: #ffeead;
}

.container > div:nth-child(1) {
  background-color: #c45011;
}

.container > div:nth-child(3) {
  background-color: #2362e2;
}

.container > div:nth-child(2) {
  background-color: #18b63f;
}

.container > div:nth-child(4) {
  background-color: #e44703;
}

Previous9.1 CSS Flexbox & Responsive DesignNext9.4 Homework/Practice

Last updated