The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Collapsing menu for responsive design

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #245436

    Next step in sorting out the responsiveness of my site is the menu.

    First of all, I have an issue that the search form ends up outside of the page, see (upper right corner) for an example.

    But the main issue is the central menu and the home menu to the left. The home menu always has a second level, the central menu is either a single level or two levels depending on section. In the code pen, I included an example of the menu with two levels.

    I am quite uncertain as to the best way to approach collapsing this in some fashion for smaller screens.


    I revisited the above menu design and decided to simplify it somewhat by making it a single, central menu. I am hoping this might make it easier to achieve a mobile-friendly version while still keeping the two-tiered menu items where that applies.

    Obviously, I understand this would be a bit much to ask someone to rework, so any pointers to examples would be much appreciated as well. :)


    Are you specifically after a CSS-only multi-level menu? If so I have a few here that may be of interest

    Otherwise, you could try Googling for a “multi-level menu script”? There are a few freebies on Dynamic Drive that may be worth looking at too


    In part I am trying to get a sense of what kind of approach most people would recommend. A lot of examples that I find when googling are a few years older, and I don’t know enough to say whether they are using any outdated methods.

    I think CSS-only would be preferable, so I am going to take a look at yours, thank you. :)


    You’re on the approach; you’re looking for responsive design. That means design your site for mobile users first. One of the basic designs is to have menus drop down with a hamburger icon.

    All drop downs are the same, you can only code the HTML in so many ways
    It’s the CSS that makes the difference.

    Many websites use Bootstrap. Look for components and check out the different options. Their code can give you an idea on many options.

    One thing I can say is I see you using media queries; are you familiar with them?


    Its a pre-existing site, so designing entirely mobile first has proven problematic. So instead I’ve ended up in the situation of trying to make the basic responsive design work for as many sizes as possible.

    This is my first attempt at a responsive design, so I am only just starting to get a grasp on media queries.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.