Headers

Header Types

This template offers four different headers that can easily be altered on the fly. The different headers are defined by the class .header-X, where X represents the header type (1-4) as shown below.

Example
								
									

Important: We add the class .reveal-side-navigation to the nav-bar wrapper if a side navigation is used as an auxiliary or mobile navigation. This class ensures that the header section animates sideways and so revealing the side navigation when called.


Header Parameters

There are five different header parameters that control when the header should become sticky, when it should change background color, when it should scale in height, and when it should animate in/out. These parameters are entered as data-attributes whose values specify when specific classes should be added to the header. These classes can be targeted using CSS to style the headers further to your liking. Below is an example of each parameter.

Note: Attribute values represent the number of pixels that should be scrolled by the user before header becomes sticky, changes background color, scales or animates. You can either enter a number or use the string 'window-height' for these parameters to take effect once the user has scrolled the full height of the window; this is useful when using a fullscreen slider or image. You can also use one or combine these attributes.

Base Attributes
Sticky Threshold

Make any header type sticky by using the data-sticky-treshold attribute. Class applied .header-sticky.

Example
								
									
Bkg Threshold

Change the header background color by using the data-background-treshold attribute. Class applied .header-background.

Example
								
									
Compact Threshold

Switch to compacted header by using the data-compact-treshold attribute. Class applied .header-compact.

Example
								
									
Animation Attributes

We use helper classes to determine when the header should animate in/out of view when scrolling beyond a certain point. You can target the classes added by helper attributes and change the way the header animates in/out of view. By default, when these attributes are used, header will slide in/out of view from the top.

Header In Threshold

Helper attribute that sets the header CSS transform position to 0. Use this helper attribute by using the data-helper-in-threshold attribute. Class applied .header-in.

Example
								
									
Header Out Threshold

Helper attribute that sets the header CSS transform position to -10rem. Use this helper attribute by using the data-helper-out-treshold attribute. Class applied .header-out. Note: If you header height is greater than 10rem(100px), you will need to overwrite the .header-out class found on line 357-263 of templates.css.

Example
								
									

Header Classes New

Fixed Header on Mobile

By default mobile headers are static, but you set it to fixed by adding the .header-fixed-on-mobile class to the .header wrapper.

Example
								
									

Header Types

Below are examples of each header type.

Header Type 1

Initial - fixed position with no background

header-ex-1

Upon Scrolling - fixed position, compacted with background

header-ex-1
Example
Header Type 2

Initial - relatively position with background, menu aligned left

header-ex-2

Upon Scrolling - fixed position and compacted

header-ex-2
Example
Header Type 3

Initial - relative position, upper and bottom header

header-ex-3

Upon Scrolling - fixed position, compacted bottom header only

header-ex-3
Example
Header Type 4

Initial - absolute position at bottom with no background

header-ex-4

Upon Scrolling - fixed position at top with background

header-ex-4
Example

Swapping Logos

Each header type can use two logos; one for when the header has no background and one for when a background is added. We have built it this way because at times when a header overlays an image one may want to use a different colored logo then when the header has a background. Adding swapping logos is easy, just add two logos within the .logo wrapper.

Note: initial logo should always appear last.

Example
								
									
								
							

Swapping Navigation Color

As with logos, one may want to switch navigation colors for a particular page only and not the entire site. By default, when the header has no background, the navigation employs lighter colors. To switch to darker colors on a particular page, simply add the .nav-dark to the .nav-bar wrapper. This will make the main navigation darker and more appropriate for lighter backgrounds.

Target .nav-dark to change default dark colors as necessary. Below is an example of using Header Type 1 along with the .nav-dark class.

Note: the .nav-dark class will be overridden once the header receives a background.

Example