CODEWITHSUNDEEP
htmlcss
yoyo Ahmed
yoyo Ahmed

Reputation: 39

CSS Navbar - How to evenly space out elements

The spaces in the navbar elements at the center is not equal. CSS also seems to let text overlap with other elements for example if I write "HOMEabcdefgh" it will overlap with the next element instead of spacing it out evenly.

Also HOME text is shorter than the rest of the elements text hence we see a lot of spacing between it and its next element "DRESSES". I want to evenly space out all the center elements. Please see the image enter image description here

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #b7b7b7;
}

body {
  background-color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background-color: #332323;
}

.logo {
  cursor: pointer;
  color: white;
  font-size: large;
}

.nav_links a {
  display: inline-block;
  width: 20%;
  padding-left: 3%;
  padding-right: 10%;
  cursor: pointer;
  border-left: 1px solid white;
  margin-right: 30px;
  text-transform: uppercase;
  list-style-type: none;
}

li {
  min-width: 80px;
}

.button {
  background-color: #302b2b;
  padding: 5px 10%;
  color: white;
}
<header>
  <h4 class="logo">N</h4>
  <nav class='nav1'>
    <ul class='nav_links'>
      <a>
        <li href="#home">Home</li>
      </a>
      <a>
        <li href="#dresses">Dresses</li>
      </a>
      <a>
        <li href="#trends">Trends</li>
      </a>
    </ul>
  </nav>
  <a href="#"><button class="button">Contact</button></a>
</header>

Upvotes: 1

Views: 11902

Answers (3)

tripathiakshit
tripathiakshit

Reputation: 644

You can use an inner flexbox on the nav. Also, you have hrefs on <li> elements, which isn't needed. You can add links directly to the <nav> and it will align them as needed, since it itself is also within a flexbox, spaced evenly.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #b7b7b7;
}

body {
  background-color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background-color: #332323;
}

.logo {
  cursor: pointer;
  color: white;
  font-size: large;
}

nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}

nav a {
  text-align: center;
  cursor: pointer;
  border-left: 1px solid white;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.button {
  background-color: #302b2b;
  padding: 5px 10%;
  color: white;
}
<header>
  <h4 class="logo">N</h4>
  <nav class='nav1'>
    <a href="#home">Home</a>
    <a href="#dresses">Dresses</a>
    <a href="#trends">Trends</a>
  </nav>
  <a href="#"><button class="button">Contact</button></a>
</header>

Upvotes: 1

Moshe Sommers
Moshe Sommers

Reputation: 1516

You need to give the Nav some width and then use flex box on the nav_links. I removed all you'r padding anchor width and margin

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #b7b7b7;
  }
  
  body {
    background-color: black;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
    background-color: #332323;
  }
  
  .logo {
    cursor: pointer;
    color: white;
    font-size: large;
  }
   /** Give the nav a width */
  .nav1{
      width:20%;
  }
  /** Set the flex properties */
  .nav_links{
    display: flex;
    justify-content: space-between;
  }
  .nav_links a {
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    list-style-type: none;
  }
  
  .button {
    background-color: #302b2b;
    padding: 5px 10%;
    color: white;
  }

Upvotes: 0

Onur
Onur

Reputation: 91

You can give the ul display:flex with space between

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #b7b7b7;
}

body {
  background-color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background-color: #332323;
}

.logo {
  cursor: pointer;
  color: white;
  font-size: large;
}

.nav_links a {
  width: auto;
  cursor: pointer;
  border-left: 1px solid white;
  text-transform: uppercase;
  list-style-type: none;
  padding-left: 15px;
  padding-right: 15px;
}

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  background-color: #302b2b;
  padding: 5px 10%;
  color: white;
}
<header>
  <h4 class="logo">N</h4>
  <nav class='nav1'>
    <ul class='nav_links'>
      <a>
        <li href="#home">Home</li>
      </a>
      <a>
        <li href="#dresses">Dresses</li>
      </a>
      <a>
        <li href="#trends">Trends</li>
      </a>
    </ul>
  </nav>
  <a href="#"><button class="button">Contact</button></a>
</header>

Upvotes: 1

Related Questions