How to Design A Minimalist Fixed Menu Header

I recently added a fixed menu header to the site, and I think it turned out really good, so I thought I’d share the secret art of a fixed-menu-header-design with you. Well, it may not be secret, but it’s tricky getting everything in place with your logo, menu, search, etc, so I hope this guide will help you get everything organized, or at least give you an idea on how you can do it.

1. Find inspiration, I got some inspiration from Mashable’s fixed menu-header.
2. Everything you want “fixed” should fit inside the content area, to make sure people with lower resolutions can still see it.

Fixed header CSS

This is how my navigation is organized.

<div id="nav">
    <div class="wrap">
        <ul>
	    <li><a href="/">Home</a></li>
        </ul>
    </div>
</div>

Fixed Header CSS

#nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

#nav .wrap:before {
    color: white;
    content: "rushtips |";
    font-size: 1.5em;
    font-weight: bold;
    margin: 8px 10px 10px;
    position: fixed;
}

.wrap {
    margin: 0 auto;
    width: 1140px;
}

Genesis: Reposition fixed element

Reposition the element you wish to “fix”. I moved my navigation from after the header, to before the header. It’s not really necessary, since you’re fixing it to the top, but it’s a good idea to keep your HTML organized.

remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

Genesis: Add a search form

add_action( 'genesis_before_header', 'site_search');
function site_search() {
?>
	<div id="search-bar">
		<form id="search" method="get" action="/search">
		<input name="q" type="text" id="s" class="search" placeholder="i.e Design Tips">
		</form>
	</div>
<?php

}

You can also add more icons to the end of the nav; icons provide a minimal visual experience, but if someone is looking for a “search form” or a “contact us” page, they’ll hover over that icon. You can then provide a drop-down menu or a div, like I’ve done with the search form.

Helpful links

• www.w3.org/Style/Examples/007/menus.en.html
• http://designm.ag/tutorials/sticky-sidenav-layout
• http://www.jtricks.com/javascript/navigation/fixed_menu.html