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

Home Forums CSS Responsive Menu Help?

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

    Hey Guys_ (&Paulie_D)_ haha,
    I have a menu that I’ve been trying to make responsive. The problem is as the browser shrinks, the divs/ ul/ li’s seem to be fixed and won’t contract before dropping to a new line. I have created a code pen here: Take a look
    There is more info in the pen description about what I want it to do.

    basically there is a lime colored background.
    the red border represents the UL.
    I want the UL nd the LI’s to squish down with the browser until it cannot squish anymore before dropping to two lines.


    I would seriously think about adding some classes in there to simplify your CSS

    This is one hell of a selector

    #menu > ul > li > div > ul > li > a {
      padding-left: 0 !important;
      border-bottom: 1px solid #9c9c9c;
      color: #000000;   

    Not too much you can do about the squishiness without a lot of media queries or doing everything in %.

    You might want to look at inline-block instead of floats for the top level list items though.


    thanks paulie. I’m working off of an open cart default theme and its killing me. I tried using % but I think I will take your advice and just rebuild it and use classes. If I run into problems again I’ll re-post.

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