Creating a beautiful navigation header using the jQuery.mhead plugin is really easy. Just follow the steps in this mobile header tutorial.
If you can, it is recommended to use the HTML5 doctype.
<!DOCTYPE html> <html>
Include jQuery and the jQuery.mhead .js and .css files in the
HEAD of your webpage.
If you want to use icons in your header, you might also want to include an icon font like Font Awesome.
<head> <script src="path/to/jquery.js"></script> <script src="path/to/jquery.mhead.js"></script> <link href="path/to/jquery.mhead.css" rel="stylesheet" /> <link href="path/to/fontawesome.css" rel="stylesheet" /> </head>
You probably don't need to make any changes to the HTML of your webpage.
But if you can, it is recommended to wrap all HTML in only one
This is mostly important if you're also using the jQuery.mmenu plugin.
<body> <div id="my-page"> <div id="my-header"></div> <div id="my-content"></div> <div id="my-footer"></div> </div> </body>
DIV is best off without a (min-/max-)width and (min-/max-)height, padding, border, margin, position, top, right, bottom, left or any other CSS value that changes its size and position.