Horizontal Menu
CSS / HTML

How to make a Horizontal Menu with Equal Width & Adjustable Items

Horizontal Menu

Hi, I am writing this tutorial to teach you how to make a horizontal menu with equal width & adjustable items. Just follow the steps one by one for better understanding.

Sometimes you may want to create a horizontal menu that should have equal width for all the menu items inside it. It should be flexible, responsive, and should automatically adjust the width if any number of items are increased or decreased. The width of all the items should be equal in every condition.

Let’s make a Horizontal Menu with equal width & adjustable items

Let’s write some HTML to create our menu.

<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="#">About</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

Now we will write some basic CSS for our ul li.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}
ul > li {
  height: inherit;
  line-height: 50px;
  background-color: #13b658;
  text-align: center;
}
ul > li >a {
  width: 100%;
  color: white;
  text-decoration: none;
}
ul > li >a:hover {
  background-color: #11a34f;
}

Finally, we are going to use display:flex; property of CSS which will help us to make it as we actually want. So we will add display:flex; property to our ul. Now the ul has the given CSS.

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Also, we will add justify-content: space-around; property to horizontally align our menu items and position them with space before, between, and after.

ul {
  justify-content: space-around;
}

Now we add flex-grow:1; property to our ul > li which will decide how much and when the menu items will grow to make all the menu items equal & adjustable.

ul > li {
flex-grow: 1;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
}

We will add display:flex; property to our ul > li also which will help our anchor tag to cover all available space around it.

ul > li {
  display: flex;
}

That’s it, Now you can check your Horizontal Menu. Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *