CODEWITHSUNDEEP
htmlcss
xibawh
xibawh

Reputation: 23

How do I close the gaps between the objects in a list for navbar?

I am trying to replicate apple.com's navbar. But i ran into a problem with having the list spread way far out than the actual website. I was wondering what is causing this? I tried margin/padding for the list and this is the best i can come up with.

If I didn't make any sense above, to summarize I just want the list in the center and not spread apart as much.

/* real active css */

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.nav {
  height: 40px;
}

.nav .navbar {
  background: #1d1d1f;
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: block;
}

.nav .navbar ul {
  background: #1d1d1f;
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  padding-left: 50px;
}

.nav .navbar ul li {
  list-style: none;
  margin: 0em 10em 0em 0em;
}

.nav .navbar ul li,
.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
<nav class="nav">
  <div class="navbar">
    <ul>
      <li>
        <a href="https://www.apple.com"><img src="Images/apple.svg"></a>
      </li>
      <li><a href="https://www.apple.com/mac/" class="menu">Mac</a></li>
      <li><a href="https://www.apple.com/ipad/" class="menu">iPad</a></li>
      <li><a href="https://www.apple.com/iphone/" class="menu">iPhone</a></li>
      <li><a href="https://www.apple.com/watch/" class="menu">Watch</a></li>
      <li><a href="https://www.apple.com/tv/" class="menu">TV</a></li>
      <li><a href="https://www.apple.com/music/" class="menu">Music</a></li>
      <li><a href="https://support.apple.com/" class="menu">Support</a></li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/search.svg"></a>
      </li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/bag.svg"></a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 2

Views: 47

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You need to set max-width on your .nav ul - Also you should use justify-content: space-evenly to space them out properly on the list instead of using of margins.

In addition we need to set margin to 0 auto in nav > ul so that it stays in the center and responsive the browser as well. I have fixed up your CSS and is working as expected.

Working Demo: (Run snippet below and click full page to see the results)

/* real active css */

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.nav {
  height: 40px;
}

.nav .navbar {
  background: #1d1d1f;
  position: fixed;
  width: 100%;
  z-index: 1000;
  display: block;
}

.nav .navbar ul {
  background: #1d1d1f;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2em;
}

.nav .navbar ul li {
  list-style: none;
}

.nav .navbar ul li,
.navbar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
<nav class="nav">
  <div class="navbar">
    <ul>
      <li>
        <a href="https://www.apple.com"><img src="Images/apple.svg"></a>
      </li>
      <li><a href="https://www.apple.com/mac/" class="menu">Mac</a></li>
      <li><a href="https://www.apple.com/ipad/" class="menu">iPad</a></li>
      <li><a href="https://www.apple.com/iphone/" class="menu">iPhone</a></li>
      <li><a href="https://www.apple.com/watch/" class="menu">Watch</a></li>
      <li><a href="https://www.apple.com/tv/" class="menu">TV</a></li>
      <li><a href="https://www.apple.com/music/" class="menu">Music</a></li>
      <li><a href="https://support.apple.com/" class="menu">Support</a></li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/search.svg"></a>
      </li>
      <li>
        <a href="https://www.apple.com/mac/"><img src="Images/bag.svg"></a>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 2

Related Questions