Spreading a responsive menu out to make full use of parent div

[schwim]

Hi there everyone!

My code: http://schwim.net/after5

Here’s the menu layout I’d like to have:

And here’s what I’ve managed so far:

I would like the menu entries to spread out to use all of the available space in the parent div but still operate responsively, giving me the hamburger on mobile view. I’ve played with it for a couple hours now but have been unable to figure out a solution. I thought I would ask in case it’s impossible with the way I’ve created the menu.

Any help would be greatly appreciated!

[PaulOB]

You could do this for modern browsers without hurting older browsers.

.menu{display:flex;justify-content:space-between}

@media only screen and (max-width: 768px){
.menu {display:block}
}

[SamA74]

If you still want a similar effect to work in IE9:-

.menu {
    display: table;
    width: 100%
}
.menu a { display: table-cell }

@media only screen and (max-width: 768px){
.menu, .menu a {display:block}
}