Any CSS master here ? Need help for layout

[dmegatool]

I'm trying to split my menu in two with css. Obviously the menu is a unordered list so don't tell me to make 2 list  

 

I'm not looking for the code here, just the logic to make it happen. Like make a div there, float this and boom. 

 

Here's 2 screenshot to see how it should behave when reducing the window with... 

 

 

 

[Unknown_Guy]

To me it looks like you really should have 2 lists...

[dmegatool]

To me it looks like you really should have 2 lists...

The mobile version won't be split. That would make it awkward to explain to the client "Yeah so you got 3 menus to manage".... 

 

I'll try to make something with selectors. Like li:nth-child(n+2). I don't know if that's the way to go so that's why I asked here before diving in. 

[Ciccioo]

if no one can suggest better ways and you have to go for that selectors workaround, wouldn't it be easier to just put another class or id for the elements you want to refer?

and can you please explain the problem with having two lists and the client that "has to manage 3 menus"

is the menu dynamic? does the client have to manage it from some sort of control panel? is the page dynamically generated?

[dmegatool]

Yes it's dynamic. I'm using Drupal.

 

I'll try what I said. The other solution I thought would be to include that circle logo as part of the menu/list. So item1, item2, logo, item3, item4. 

[tbc]

^ bingo.

 

but really only for your first and mobile menus.

 

have your mobile css hide the element that is rendering the circle.  piece of cake.

 

the second menu(reduced width) isn't really feasible with a single list without something like adobe's css regions (or w/e the official name for it is)

 

i don't know druoal, so i don't know any specific limitations, so adapt suggestions as necessary.