w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to make menu items span across menu bar evenly

Use CSS to give your anchors (a) the same padding and margins on the left and right and a percentage width of the li, like this;

ul#main-menu {
   width: 100%;
}

ul#main-menu li {
   width: 20%; /* for 5 menu items */
   padding: 0;
   margin: 0;
   display: inline-block;
}

ul#main-menu li a {
   padding: 0px 5px;
   margin: 0px auto;
   display: block;
}

and change the width of the li depending on the number of menu items.

That should do the trick!





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.