Grow your CSS skills. Land your dream job.

Responsive Menu like CSS Tricks

  • # November 29, 2012 at 3:21 pm

    I’m trying to figure out how to make a menu bump down to two rows like Chris did on here. Can anyone help me with this?

    # November 29, 2012 at 3:31 pm

    You mean when the browser is resized? That’s done with media queries.

    [http://css-tricks.com/css-media-queries/](http://css-tricks.com/css-media-queries/ “http://css-tricks.com/css-media-queries/”)

    # November 29, 2012 at 3:36 pm

    I get it changes with media queries but I didn’t know how he made it bump down to a second line.

    # November 29, 2012 at 3:39 pm

    It’s just a matter of adjusting the width of the `

  • `tags

    li { width: 25%; float: left; }

    @media screen and ( min-width: 960px ) {
    li { width: 12.5%; }
    }

    ^ That should work

    **Edit:** To clarify, if you have 8 elements, that will take it from two rows of 25% width elements, to 1 row of 12.5% elements. Obviously, if you have a different page count, those numbers will change.

# November 29, 2012 at 3:40 pm

There is a great tutorial for a similar effect here: http://www.onextrapixel.com/2012/08/27/creating-a-css3-responsive-menu/

# November 29, 2012 at 6:42 pm

As @ChrisP said – it’s just about the li widths. If you want a row of 8 at desktop, use 12.5% width (of their container, which is 100% width).

Then if you stick them at 25% it will naturally force the last four onto a line below.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".