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.
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?
Thanks
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.
Code:
.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?
Thanks