Hi,
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.
@chrisburton
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.
@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?
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).
Hi, 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: http://codepen.io/anon/pen/kEpqb
Not sure if that makes sense.
Any help would be greatly appreciated.
@wadem http://codepen.io/chrisburton/pen/nGliq
@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.
@Chrisburton That is fantastically helpful. Thank you.
@wadem I updated my code and I think I'd go with Option 1 in this case. It would be much easier to maintain.
http://codepen.io/chrisburton/pen/nGliq
@chrisburton 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.
@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?
http://codepen.io/chrisburton/pen/nGliq
Yeah makes sense. I forgot its common to have 2 sets of nav in responsive design. Thanks again @chrisburton
@wadem The good thing is that you don't need additional
navmarkup in your case. Just swap hiding anh1and a list-item. Glad I could help.@chrisburton Perfect thanks, working out better than I imagined.
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).