Question 212171 in Html Question posted in
Some basic documentation can be found here.

Html – Please Checkout Flex in Navbar

I am trying to make a clone of amazon website. In the navbar "display: flex; " is not working. I an new to web development. Please help me! Please read the the code and tell me the about the error.

I tried using this command in index.html. Make a folder name img within the folder where you have your html file and change the src path to

The logo appears but flex is not working.

.navbar{
  display : flex}

* {
  margin: 0;
  font-family: Arial;
  border: border-box;
}

.navbar {
  height: 60px;
  background-color: black;
  color: white;
  display: flex;
}

.nav-logo {
  height: 50px;
  width: 113;
}

.logo {
  height: 50px;
  width: 113;
  background-image: url("amazon_logo.png");
  background-repeat: cover;
}

.boder {
  border: 2px solid transparent;
}

.boder.hover {
  border: 2px solid white;
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <!-- link rel="stylesheet" href="style.css" -->
</head>

<body>
  <header>
    <div class="navbar">
      <div class="nav-logo border">
        <div class="logo">
        </div>
      </div>
    </div>
    
    <div class="nav-address">
      <p>Deliver To</p>
      <div class="add-icon"></div>
      <i class="fa-solid fa-location-dot"></i>
      <p>India</p>
    </div>
  </header>
</body>
Tags:

2

Answers


  1. 0

    You are having some typos in your code, which causes issues.

    1..boder -> .border
    2. In the .nav-logo and .logo classes, specify the units for width property such as px

    With these corrections flex should work and the logo should display within the navbar.

    Note that: With only one child within the navbar the property flex doesn’t make any big sense, add some nav links or menu items to see the real flex property effect.

    Login or Signup to reply.
  2. 0

    I noticed that in both .logo class and .nav-logo class you typed a width value without a unit for them like (px, rem, vw, etc.), also You have to set some attriubutes for the background logo of .logo class like background position, background-size, and also style.css has a typo in .border class

    Below Code I provided would work for you

    * {
            margin: 0;
            font-family: Arial;
            border: border-box;
        }

        .navbar {
            height: 60px;
            background-color: black;
            color: white;
            display: flex;
        }

        .nav-logo {
            height: 50px;
            width: 113px;

        }

        .logo {
            height: 50px;
            width: 113px;
            background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/2560px-Amazon_logo.svg.png");
            background-repeat: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .border {
            border: 2px solid transparent;

        }

        .border.hover {
            border: 2px solid white;
        }
    <header>
        <div class="navbar">
            <div class="nav-logo border">
                <div class="logo">
                </div>
            </div>
        </div>
        <div class="nav-address">
            <p>Deliver To</p>
            <div class="add-icon"></div>
            <i class="fa-solid fa-location-dot"></i>
            <p>India</p>
        </div>
    </header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search