Dynamically change margin between Menu items

Question

I've got a 'ul' list at the top of my page that is used for the navigation bar:

This is currently set using a fixed width div and fixed margins around each of the items. How could I go out making the spaces between the 'menu items' fluid so that page width changes would increase/decrease the margins between them?

For example when the window is pretty wide:

And this when the window is shrunk:

I've been using @media CSS queries so far, but it's pretty messy and not fluid/dynamic. I'll paste the CSS i've currently got:

ul.header_items {
    list-style:none;
    position:relative;
    width: 1250px;
    line-height:50px;
    margin-left: auto;
    margin-right: auto;
}

.header_items li{
    display: inline;
    list-style-type: none;
    font-family: 'cabinbold', sans-serif;
    color: #ffffff;
    padding: 5px 2px 5px 2px;
    background-color: #7E489C;
    font-size: 14pt;
    text-align:center;
    text-transform: uppercase;
    height: 31px;
    box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.2);
    transition: 0.4s;
}

<header id="static_nav">
    <ul class="header_items" style="padding-left:0px;">
        <li class="<?php echo $active_page_home ?>" id="header_item_first"><a href="home" id="index_button">Home</a></li>
        <li class="<?php echo $active_page_dance ?>"><a href="dance-performance" id="dance_button">Dance &amp; Performance</a></li>
        <li class="<?php echo $active_page_adult ?>"><a href="adult-fitness.php">Adult &amp; Fitness</a></li>
        <a href="https://www.millyacademy.com/workshops.php"><li class="<?php echo $active_page_workshop ?>">Workshops</li></a>
        <a href="https://www.millyacademy.com/corporate-celebrations.php"><li class="<?php echo $active_page_corp ?>">Corporate &amp; Celebrations</li></a>
        <a href="https://www.millyacademy.com/showcase.php"><li class="<?php echo $active_page_gallery ?>">Gallery</li></a>
        <a href="https://www.millyacademy.com/shop.php"><li class="<?php echo $active_page_shop ?>">Shop</li></a>
        <a href="https://www.millyacademy.com/contact.php"><li class="<?php echo $active_page_contact ?>">Contact Us</li></a>
        <li id="button_student_login"><a href="student-login" id="login_button">Student Login</a></li>
    </ul>
</header>

Thanks for your help in advance! If you want to see the navigation bar in action, the url is http://www.millyacademy.com/concept/

I would start by making that html valid. `a` is not allowed as direct child of `ul`, only `li` is — Pevara, Jul 22 '15 at 22:04
have a look at this: http://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss — Pevara, Jul 22 '15 at 22:15
start with this but may i suggest that you investigate a burger dropdown http://jsfiddle.net/0z536p4v/ — Rachel Gallen, Jul 22 '15 at 22:19
Cheers, looking at flex-boxes now. Yeah when the width is less that 800px it becomes a hamburger menu :) — ConnorL, Jul 22 '15 at 22:23

Dynamically change margin between Menu items

0 Answers0