Entity Nav Bar

Order of Article/Header

Based on the original prototype, it would appear that there was a desire to have the left and right alignment of the navigation and header/aside be based on the order of the elements within the DOM. I don't know if this is actually feasible given CSS selectors.

Actually, now I'm realizing this probably won't work: if you consider a case where there is only navigation (no header or aside), you have no additional element to relatively position the list. I think we are just going to need to use utility positioning classes (e.g., "float-right", "pull-left", or "right").

Marking Up the Responsive Option

I'm not a fan of how much work is involved in converting the vanilla Twitter Bootstrap navigation bar to a responsive format (you have to add a "nav-collapse" element to a non-intuitive inner element and the "toggle" a element you have to add is too much markup IMO).

I'm not sure if this is too focused on the implementation for the prototyping stage; I'm trying to determine the leanest way of enabling the responsive menu. I'll think aloud (pretend I'm shouting this at you):

• If the bar is within a responsive container, it will automatically, responsively switch to a vertical list in smaller viewports
• If a "toggle" element (a or button) is present, the JavaScript will know to collapse the nav

That seems the cleanest. Any potential issues here? I feel like the Bootstrap implementation is planning for added complexity that doesn't commonly exist (multiple navigation lists with independent expand/collapse controls)

Nested Header Concerns

I get the idea that header within the nav might contain the title of the website, yes? If so, this could present some unique problems for the HTML5 document outlining algorithm (http://gsnedders.html5.org/outliner/). Let's say someone does this:

<nav>
	<header>
		<h1>Title of the Website</h1>
	</header>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	</ul>
</nav>

<h2>Title of the Section</h2>

The outliner recognizes this as:

1. Title of the Website
   1. Title of the Section

You could rectify this slightly by enclosing the section title in a section (which would be arguably more proper):

<nav>
	<header>
		<h1>Title of the Website</h1>
	</header>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	</ul>
</nav>

<section>
	<h2>Title of the Section</h2>
</section>

And the outliner:

1. Untitled Section
   1. Title of the Website
   2. Title of the Section

Better, but not ideal. If this were changed slightly so that we had an admittedly ugly div.navbar:

<div class="navbar">
	<header>
		<h1>Title of the Website</h1>
	</header>
	<nav>
		<ul>
			<li>Link 1</li>
			<li>Link 2</li>
			<li>Link 3</li>
		</ul>
	</nav>
</div>

<section>
	<h1>Title of the Section</h1>
</section>

We get what we want (well, the "Untitled" is a little problematic):

1. Title of the Website
   1. Untitled Section
   2. Title of the Section

Should we consider switching to a containing div element?