Making a responsive navigation without any additional css framework

This small tutorial will show you how to create a simple responsive navigation that works for any device.

Sidebar Navigation of smashing magazine style

I thought it will be hard to implement such beautiful navigation. I was wrong about that. This smashing magazine style left navigation is implemented with just HTML and CSS.

Creating twitter desktop style header navigation

Twitter navigation is one of my favorite navigation styles. So I have tried replicating the same navigation, which seems good and tested with the browsers Chrome, firefox and Microsoft Edge.

Google apps style navigation

I have seen different types of navigation menu styles for websites and apps. But the most user friendly menu style I have come across is google apps style navigation.

An example app that I can refer is gmail app and an example website I can give is google store

Making a full page navigation for all devices

Having responsive site navigation is important for a website and also it is necessary to have good user experience on all the platforms

Fixed header on scroll

Having fixed header is very user friendly to any website and these below steps will show you how to have a fixed header with minimum steps. And there is an fiddle example at the bottom of this post.

For this example, I am creating navigation header and a table below it in a html file.

Note: Bootstrap css has been used for navigation and datatable.

 Bootstrap CDN available here :

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

Step 1:
  Create a html file and add simple navigation header and wrap it in a div block with a class name as 'navigation'

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Step 2:
   Create a simple datatable with the below code and put it in a div with class name as 'datatable'

<table class="table table-condensed table-bordered">
       <thead>
           <tr><th>Head1</th><th>Head2</th></tr>
       </thead>
       <tbody>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
           <tr><td>Col1</td><td>Col2</td></tr>
       </tbody>
</table>

Step 3:
   Now, add custom styles to your html code either in the same file or add it as an external css file

// Style to Navigation block.

.navigation {
    padding:8px; /* Some space around navigation pills */
    position:fixed; /* IMP.This makes the div fixed and cannot to moved*/
    top:0;          /* This will set the top edge position*/
    border:1px solid green; /* I Just gave it to differentiate between table and header*/
    background:#fff; 
    width:100%;    /* Occupies 100 percent of the page width*/
}

// Style to Datatable block

.datatable {
    margin-top:60px; // Top edge margin
}

At the end of step 3, you should be able to scroll the table with header as fixed (Note: For scroll bar to appear, the height of the browser should be less than the height of the page content. In our example browsers height should be less than table's height.)

 Fiddle available for this example here : http://jsfiddle.net/94hnes36/