why isn't flexbox working as intended on my site? - Html

karlo292
April 6, 2023
151 views
1 vote
2 Answers

I can’t find why flex-end isn’t working on my site, I know there’s something interrupting it but I just can’t manage to find it.

For anyone interested in helping here’s the code, I’m trying to only align navbar-links-end and navbar-links-middle to end of navbar :

That’s all details you should know, if there’s anything else just post a comment, I will answer as soon as I can

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 70px;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;
}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  margin-left: auto;
  width: auto;
}

<nav class="navbar">
  <img class="navbar-logo" src="images/intel-header-logo.png">
  <ol class="navbar-links-left">
    <li class="navbar-link">
      <p>PRODUCTS</p>
    </li>
    <li class="navbar-link">
      <p>SUPPORT</p>
    </li>
    <li class="navbar-link">
      <p>SOLUTIONS</p>
    </li>
    <li class="navbar-link">
      <p>DEVELOPERS</p>
    </li>
    <li class="navbar-link">
      <p>PARTNERS</p>
    </li>
  </ol>

  <ol class="navbar-links-middle">
    <li class="navbar-link">
      <i class="far fa-user"></i>
    </li>
    <li class="navbar-link">
      <i class="fa-solid fa-globe"></i>
    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>USA (ENGLISH)</p>
    </li>
  </ol>

  <ol class="navbar-links-end">
    <li class="navbar-link">
      <i class="fa-solid fa-magnifying-glass"></i>

    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>Search: Intel.com</p>
    </li>
  </ol>
</nav>

Answers

Why do you have .navbar{width:70px}? It should be 100%:

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 100%;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;

}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center; /* add this property */
  width: auto;

}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center; /* add this property */
  width: auto;
}


.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center; /* add this property */
  margin-left: auto;
  width: auto;


}

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <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" />

</head>
<body>



    <nav class="navbar">
        <img class="navbar-logo" src="images/intel-header-logo.png">
        <ol class="navbar-links-left">
            <li class="navbar-link">
                <p>PRODUCTS</p>
            </li>
            <li class="navbar-link">
                <p>SUPPORT</p>
            </li>
            <li class="navbar-link">
                <p>SOLUTIONS</p>
            </li>
            <li class="navbar-link">
                <p>DEVELOPERS</p>
            </li>
            <li class="navbar-link">
                <p>PARTNERS</p>
            </li>
        </ol>

        <ol class="navbar-links-middle">
            <li class="navbar-link">
                <i class="far fa-user"></i>
            </li>
            <li class="navbar-link">
                <i class="fa-solid fa-globe"></i>
            </li>
            <li class="navbar-link" style="white-space: nowrap;">
                <p>USA (ENGLISH)</p>
            </li>
        </ol>

        <ol class="navbar-links-end">
            <li class="navbar-link">
                <i class="fa-solid fa-magnifying-glass"></i>
                
            </li>
            <li class="navbar-link" style="white-space: nowrap;">
                <p>Search: Intel.com</p>
            </li>
        </ol>
    </nav>



</body>
</html>

Change .navbar to width: 100%;.

Remove margin-left: auto; on .navbar-links-end and put it on .navbar-links-middle instead.

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  position: fixed;
  background: white;
  margin-left: auto;
  border-bottom: 1px solid black;
  width: 100%;
  height: 70px;
}

.navbar-logo {
  justify-content: flex-start;
}

.navbar-links-left {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

.navbar-link {
  margin-right: 2rem;
  color: #0068b5;
  font-size: 16px;
  align-items: center;
}

.navbar-links-middle {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  margin-left: auto;
  width: auto;
}

.navbar-links-end {
  display: flex;
  justify-content: flex-end;
  list-style-type: none;
  align-items: center;
  /* add this property */
  width: auto;
}

<head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <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" />
</head>

<nav class="navbar">
  <img class="navbar-logo" src="images/intel-header-logo.png">
  <ol class="navbar-links-left">
    <li class="navbar-link">
      <p>PRODUCTS</p>
    </li>
    <li class="navbar-link">
      <p>SUPPORT</p>
    </li>
    <li class="navbar-link">
      <p>SOLUTIONS</p>
    </li>
    <li class="navbar-link">
      <p>DEVELOPERS</p>
    </li>
    <li class="navbar-link">
      <p>PARTNERS</p>
    </li>
  </ol>

  <ol class="navbar-links-middle">
    <li class="navbar-link">
      <i class="far fa-user"></i>
    </li>
    <li class="navbar-link">
      <i class="fa-solid fa-globe"></i>
    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>USA (ENGLISH)</p>
    </li>
  </ol>

  <ol class="navbar-links-end">
    <li class="navbar-link">
      <i class="fa-solid fa-magnifying-glass"></i>

    </li>
    <li class="navbar-link" style="white-space: nowrap;">
      <p>Search: Intel.com</p>
    </li>
  </ol>
</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

why isn't flexbox working as intended on my site? – Html

Answers