The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Split nav and responsive breakdown

  • # February 13, 2013 at 5:47 am

    Not sure how to do this.
    I am making a nav bar that has the logo in the center with 2 nav links on either side.
    I am note sure how to semantically set this up and have it work well with breakpoints.

    Here is my current markup with no styling:

    Not sure if that makes sense.

    Any help would be greatly appreciated.

    # February 13, 2013 at 5:55 am

    @Chrisburton‘s solution is the way to go. You have to consider your logo as a list item.

    Unfortunately, it doesn’t seem to make much sense regarding semantic. A logo shouldn’t be part of the main navigation.

    # February 13, 2013 at 6:09 am

    [@Chrisburton](“) That is fantastically helpful. Thank you.

    # February 13, 2013 at 6:13 am

    @wadem I updated my code and I think I’d go with Option 1 in this case. It would be much easier to maintain.

    # February 13, 2013 at 6:16 am

    I do like Option one.
    Question though: When on a lower browser width I want to position the logo first and then the nav below it? ie responsive mobile friendly site.
    Thanks for your help.

    # February 13, 2013 at 6:28 am

    @wadem The only way I can think of is creating extra markup but hiding it until it hits the breakpoint. Then, hide that list-item I created. Make sense?

    # February 13, 2013 at 6:36 am

    Yeah makes sense. I forgot its common to have 2 sets of nav in responsive design.
    Thanks again @chrisburton

    # February 13, 2013 at 6:39 am

    @wadem The good thing is that you don’t need additional `nav` markup in your case. Just swap hiding an `h1` and a list-item. Glad I could help.

    # February 13, 2013 at 6:57 am

    @chrisburton Perfect thanks, working out better than I imagined.

    # February 13, 2013 at 7:33 am

    [Here’s a pen]( “”) I forked a while back showing another way of split nav. At certain breakpoints you could remove the left margin and reposition the logo (which I don’t believe belongs in the nav).

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed