Search code examples
javascripthtmlcssresponsive-design

Why isn't my logo moving to the left in flex?

I am making a dropdown navigation menu. Over 1100px width the logo and list items are in a flexbox with the logo to the left and list to the right. When the width goes below 1100px the logo is supposed to stay right and the list items turn into a menu icon with a dropdown list. However the logo just stays in the centre and I can't move it to the left.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 60px;
  background-color: #212223;
  position: relative;
}

.logo {
  float: left;
}

.logo img {
  width: 190px;
}

nav {
  float: right;
}

nav ul li {
  display: inline-block;
  padding: 5px 25px;
}

nav ul li a {
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  list-style-type: none;
}

nav ul li a:hover {
  color: rgb(174, 17, 174);
}

nav ul li a {
  text-decoration: none;
  display: inline-block;
  color: white;
  font-weight: 600;
}

.toggle-button {
  width: 35px;
  position: absolute;
  right: 80px;
  top: 35px;
  display: none;
  cursor: pointer;
}

.toggle-button span {
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: white;
  float: left;
  margin-bottom: 8px;
}

.bookatable {
  color: #fff;
  background-color: #555556;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  padding: 9px 6px 8px 8px;
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  letter-spacing: -.3px;
  cursor: pointer;
}

.bookatable:hover {
  cursor: pointer;
  background-color: #909092;
  color: white;
}


/* ---- BREAKPOINTS ---- */

@media (max-width: 1100px) {
  header {
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    justify-content: space-between;
  }
  .toggle-button {
    display: block;
  }
  nav {
    display: none;
    width: 100%;
    border-top: 1px solid white;
    padding-top: 20px;
    margin-top: 30px;
    padding-bottom: 20px;
  }
  nav ul li {
    padding: 15px 0px;
    width: 100%;
  }
  nav ul {
    text-align: center;
  }
  nav.show {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>


<header class="header">

  <div class="toggle-button" onclick="myFunction();">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="logo">
    <a href="index.html"><img src="https://i.sstatic.net/y0nIA.png" alt=""></a>
  </div>


  <nav id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="bookatable">Book A Table</a></li>
    </ul>
  </nav>


</header>

<script type="text/javascript">
  function myFunction() {
    var navbar = document.getElementById('nav');
    navbar.classList.toggle('show');
  }
</script>

enter image description here

Solution

  • if you add the following style inside your media query the image will align itself to the very right of your flex header

    .logo {
    align-self: flex-start;
}

    alternatively you can do this with the margin by adding the following to your media query

    .logo {
    margin-right: auto;
}

    your resulting media query will either be

    
@media (max-width: 1100px) {
    header {
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      justify-content: space-between;
    }
    .toggle-button {
      display: block;
    }
    nav {
      display: none;
      width: 100%;
      border-top: 1px solid white;
      padding-top: 20px;
      margin-top: 30px;
      padding-bottom: 20px;
    }
    nav ul li {
      padding: 15px 0px;
      width: 100%;
    }
    nav ul {
      text-align: center;
    }
    nav.show {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
    .logo {
        margin-right: auto;
    }
}

    or

    @media (max-width: 1100px) {
    header {
      display: flex;
      flex-direction: column;
      text-align: center;
      position: relative;
      justify-content: space-between;
    }
    .toggle-button {
      display: block;
    }
    nav {
      display: none;
      width: 100%;
      border-top: 1px solid white;
      padding-top: 20px;
      margin-top: 30px;
      padding-bottom: 20px;
    }
    nav ul li {
      padding: 15px 0px;
      width: 100%;
    }
    nav ul {
      text-align: center;
    }
    nav.show {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
    .logo {
        align-self: flex-start;
    }

}