Making a wide complex menu responsive? Advice needed please

HTML & CSS
1

Hey,

I am planning a site redesign to make it responsive.

I have a container that holds everything. The main menu at the top is 960px wide, with approximately 13 items horizontally in a row, with a few drop downs beneath different categories.

How would I even begin to make this menu responsive, so when its placed for example on an iPhone in portraight orientation that it looks decent?

Everything else on the site is managable and fine, its just the main menu links and footer links that I am not sure about.

Any advice would be appreciated.

Cheers

2

You could float the LIs left and allow them to drop to the next line if there is not enough space for them.

3

Are you suggesting I hide the drop down links in the hover state and get the user to go to go to the top links?

4

I am a bit stumped. I dont think it would look good to have every link listed, as theres maybe 25 pages.

:confused:

5

I’m not talking about the drop downs visible as well as the top level links. They would still only appear on hover. Mind you, if you are thinking mobile, I would lose the dropdowns anyway. Let each top-level link link to its own section and present more options there. This is a more natural drilling down. Drop downs suck IMHO.

6

Not so much hide them as get rid of them altogether (for all users, that is). :slight_smile:

7

There’s an interesting approach here that may be useful.

8

Cheers!

I think I need to go back to the drawing board and do a full plan of a navigational redesign / possibly a new site design.

The site is getting complex but I am keen to make it responsive.