Responsive design & grids: Where should I put the navbar to?

Question

I am building a small blog based on metalsmith and the PureCSS framework, which has a simple three-row-layout like so:

<div class="pure-g">
    <div class="pure-u-1"> Navbar </div>
    <div class="pure-u-1"> Content </div>
    <div class="pure-u-1"> Footer </div>
</div>

As I am still learning a lot new stuff about CSS and responsive design I am wondering if a navbar should be put into a grids row as well or if it should reside outside of it. The PureCSS documentation states the following:

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

This would make it a yes, as a navigation menu is of course visible to the user. However doesn't that make handling of media queries more complicated for the navbar? So where should I put my navbar to, when using responsive grids?

Answer 1

No. Navbar should not necessarily be within the grid. The main purpose of using grids is to make the content look better and proper. It also aids the programmer in deciding how many blocks of the grid to allot to a certain element.

However, since a Navbar goes all the way across the page, there is no reason to assign it a grid size. It should always be 100%.

If you are building a blog app, then only your content should be within your grid system so as to properly render the elements. From what I've seen, a footer also generally stretches all the way across the window.

Answer 2

You can use grid. Managing and handling contents and components would be easier and rendering in different browsers would be more stable.