How to equally divide the width of menu?

[web_editor]

How can I divide equally the width of each nav menu? This is the link of My Actual menu bar

Here’s the script of menu bar css:

.main-navigation {
    clear: both;
    font-weight: 300;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    position: relative;
    text-align: center;
    border-bottom: 3px solid #e92121;
    background: #ff0000;
    width: 80%;
    margin: 0 auto;
}
.main-navigation .ak-container{
    padding:0 !important;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    display: inline-block;
    position: relative;
    line-height:43px;
    font-size:18px;
    text-transform: initial;
    color:#ababab;
    white-space: nowrap;
}
.main-navigation.menu-right{
    text-align: right;
}
.main-navigation.menu-center{
    text-align: center;
}
.main-navigation.menu-right li{
    margin-left: 25px;
    margin-right:0;
}
.main-navigation.menu-center li{
    margin-left: 12px;
    margin-right:12px;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color: #FFF;
    padding: 0 18px
}
.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    position: absolute;
    z-index: 99999;
    background: #FFF;
    top: 100%;
    border-bottom: 3px solid #e92121;
    border-top: 3px solid #e92121;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

Here’s the html of menu bar:

<nav id="site-navigation" class="main-navigation menu-left">
            <div class="ak-container">
                <h1 class="menu-toggle">Menu</h1>

                <div class="menu-menu_list-container"><ul id="menu-menu_list" class="menu"><li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-860"><a href="http://66.147.244.92/~homecre1/">Home</a></li>
<li id="menu-item-861" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-861"><a href="http://66.147.244.92/~homecre1/about-us">About Us</a></li>
<li id="menu-item-865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-865"><a href="http://66.147.244.92/~homecre1/for-retailers">For Retailers</a></li>
<li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-862"><a href="http://66.147.244.92/~homecre1/careers">Careers</a></li>
<li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-864"><a href="http://66.147.244.92/~homecre1/loans">Loans</a></li>
<li id="menu-item-863" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-863"><a href="http://66.147.244.92/~homecre1/payments">Payments</a></li>
<li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-866"><a href="http://66.147.244.92/~homecre1/contacts">Contacts</a></li>
</ul></div>         </div>
        </nav>

[Paulie_D]

Generally there are a few ways.

Use javascript to count the number of li and then give each the same width based on100% / number of li.

Example

Do the above manually…and hardcode the widths yourself.

Give the ul a setting of display:table and the li, display:table-cell

Example

Oh…and flexbox.

[nixnerd]

Oh…and flexbox.

I don’t yet know that flexbox is ready for primetime. I’d give it another year before you go ahead and do that.

At any rate, if you KNOW the number of li entries in the ul… you don’t even need JS. That’s probably a more “break-free” method though because you can add a menu item at any time without breaking the layout… to a point. I mean, you can’t have 99 across the nav and expect nothing bad to happen.

Also, there’s probably some super exotic SASS mixin out there with some really clever for loop that can do this. But, it’s really quite easy to hard code the values in.

[Paulie_D]

At any rate, if you KNOW the number of li entries in the ul… you don’t even need JS.

Yeah…I mentioned that one…

SASS mixin…I dunno…how would SASS ‘know’ the number of li?

Especially as you might be writing the SASS before you’ve even done the HTML….and it wouldn’t react to new li being added…would it?

I confess I’m not up on loops and stuff like that but it would be pretty sweet.

[Atelierbram]

I know you are not asking for alignment, but in way that might help also if you could make it align (from a option in your WordPress theme), but I don’t know, … anyway, have you tried in the documentation that comes with the WordPress theme :

• Change Menu alignment
  • Click on basic tab option in the Theme Option Menu.
  • Select the menu alignment from the Menu Alignment and click save option.
  • You can align menu to start from left or right or either align at center.

P.S. Site doesn’t validate yet, (unclosed elements, e.a. … ) I know it’s not finished, but it’s always good to know the HTML is valid, when debugging CSS.

[magicspon]

how about

ul { display: table; width 100%; }
ul > li {display: table-cell; }

[shaneisme]

Yeah, @magicspon has it – I actually discovered this from BS when I was dissecting it in version 2.

Might be a little hacky, but it works great:

http://getbootstrap.com/components/#nav-justified

They take it one step farther and give the li a width of 1% which I think would force centering.

[Paulie_D]

Yeah, magicspon has it

Hey, I mentioned that one first!

Where are my +1 points…oh, sorry, wrong site. :)

[shaneisme]

D’oh! The fault is mine @Paulie_D – I didn’t read carefully enough :)

[magicspon]

Harry Roberts inuit is seriously worth checking out. Some really nice little css gems.

The nav object is fully belting

https://github.com/csswizardry/inuit.css/blob/master/objects/_nav.scss

[Author]

Posts