TIP – Position Nav Under Content

01.03.2013

When viewing a webpage app or responsive design on our mobile device it is common to see full width navigation buttons placed under the content. This gives priority to the page content in the smaller screen. You can then easily scroll to the bottom to navigate further. This of course wouldn’t be practical for a very large scrolling page for many sites it is ideal.

When planning your HTML structure, position your main navigation at the bottom of your page, underneath your main content container and above your footer. This way it will sit comfortably underneath everything else.

In order to repposition it for your larger screens then, all you need to do is set it’s position to absolute (remember to set your page container to position relative) and then pick the height from the top that you wish it to be placed.

My code looks as follows

HTML

 

<body>

<div class=”page”>

<header></header>

<div class=”main_content”></div>

<nav></nav>

<footer></footer>

</div> <!– end of page div –>

</body>

 

CSS

Large Screen and Defaults:

.page { position: relative}

header {height: 275px;}

nav {position: absolute; top: 275px;}

Medium Screen:

header {height: 200px;}

nav {position: absolute; top: 200px;}

Small Screen:

header {height: 40px;}

nav {position: static; }