Split Menu in Wordpress via css and reorder right side section


Staff member
I was wondering if there is a more elegant way of doing the following.

Basically, I have a standard horizontal main menu being outputted by Wordpress. What I want to do is float half to the left and half to the right and put a logo in the middle. To do this I attached a custom class (via the wordpress menu panel) to each li as the below.

    .menu-li-left {
    float: left;

   .menu-li-right {
    float: right;

However, the right side is of course in reverse order. To fudge it I have tested using something like "right: -9% and right: 9%" to reorder each menu item (I only have 3 menu items on the right side). It seems to work and it is even responsive, but this isn't very elegant.

Can anyone suggest a more elegant solution via CSS that I should try or is this not possible from CSS alone?