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.
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.
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.
Make any header type sticky by using the data-sticky-treshold attribute. Class applied .header-sticky.
Change the header background color by using the data-background-treshold attribute. Class applied .header-background.
Switch to compacted header by using the data-compact-treshold attribute. Class applied .header-compact.
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.
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.
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.
By default mobile headers are static, but you set it to fixed by adding the .header-fixed-on-mobile class to the .header wrapper.
Below are examples of each header type.
Initial - fixed position with no background
Upon Scrolling - fixed position, compacted with background
Initial - relatively position with background, menu aligned left
Upon Scrolling - fixed position and compacted
Initial - relative position, upper and bottom header
Upon Scrolling - fixed position, compacted bottom header only
Initial - absolute position at bottom with no background
Upon Scrolling - fixed position at top with background
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.
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.