Header Grab Bag

A selection of useful header templates

Get your site going with these fantastic headers


I spent a bit of time putting these together, but since the project they'd be used on is now defunct, huzzah! Let's share! Clone this repo using Git like so:

git clone http://github.com/alexanderlperez/headergrabbag.git



Features

  • MIT Licensed
  • 10+ navigation headers included as plain HTML and CSS
  • Based on Bootstrap and Font-Awesome
  • All JS is written in straightforward jQuery
  • Configured from LESS variables
  • Compatible with Superfish jQuery menu plugin

Included Header Preset Styles

Take the tour, click the links below!

Usage

If you're looking to get up and running as soon as possible, use one of the demos by taking what's in the HTML's <header> tag and incorporating it into your own markup. Then include the relevant header CSS in includes/css.

Customizing

Before you start, make sure you have LESS installed. Try running

lessc -v

and if it's not installed, run:

npm install -g less

1. Edit the header.less of your choice

Take a look at the demos and use those as a base of what you'd like to customize. Go to the relevant header file (ex. demo7.html uses includes/less/header-7.less) and modify the values set in the variables. Make sure the urls to the logos are correct in the header tag.

2. Build the header with the LESS compiler

All the preconfigured headers are in includes/less. In the project's top level directory, run lessc on the appropriate header file:

lessc includes/less/header-#.less PATH_TO_YOUR_PROJECT_CSS_FOLDER/header.css

This will create a standalone header.css for you to use.

3. Include the resulting CSS file, along with adding the header code in your HTML

<link> the header.css in your page, and include the relevant <header> in your page. The header HTML is located in the demo page.

4. Apply font-family styles to header elements

Modify these styles to match your font stack and add them to your site's CSS:

.nav-menu-list a {
font-family: <your font stack>
}

.post-header-info-title,
.post-header-info-content a {
font-family: <your font stack>
}
                       

Enjoy!

About the Author

This was put together for the community by @lintuxvi . Check him out on Github @alexanderlperez