Headers

Header Updated

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for the old header structure. This page will be available until all templates have been upated using the latest verison of the framework.

The header has been redesigned from scratch to offer a simpler setup and a faster way to modify it on the fly using a range of classes and data attributes. A header is created as follows:

Example
								
									

Important: The class .reveal-side-navigation was previously added to the header if the side navigation was used. The header no longer requires this class, as it is now added through JS to necessary elements.


Logo Size New

Logo size can be increased/decreased by setting its width through CSS. Increasing logo width may require an increase in header height as well (see Header Height for more information).

Example
								
									.header .logo{ 
										width: 12.5rem;
									}
								
							

Important: If the data attribute "data-compact-threshold" is used to compact the header on scroll, the logo width will need to be set using the appropriate targeting. Refer to the Compact Header section for more information.


Header Height New

Previoulsy each element within the header, such as the logo, the navigation, or auxiliary navigational elements required invidual padding and margin for vertical alignment. This has been greatly simplified; the header height and vertical alignment can now be set with height and line-height only. No matter the height, all elements within the header will always be vertically aligned.

Example
								
									.header .logo,
									.header .header-inner .navigation ` ul ` li,
									.header .header-inner .navigation ` ul ` li ` a:not(.button),
									.header .header-inner .dropdown ` .nav-icon{ 
										height: 8rem;
										line-height: 8rem;
									}
								
							

Important: To ensure perfect vertical alignment, height and line height need to be the same value. If the data attribute "data-compact-threshold" is used to compact the header on scroll, the height and line height value will need to be set using the appropriate targeting. Refer to the Compact Header section for more information.


Header Classes New

The header can be styled and positioned using a variety of header classes. Below is an example of each class.

Header Position

The header can be positioned at the bottom of the screen by adding the .header-bottom class to the .header wrapper. Note: applying this class will set its position to "absolute"; hence, it will overlay any content visible above the fold.

Example
								
									

Absolute Header

The header can be given an absolute position by adding the .header-absolute class to the .header wrapper. This class is useful when the header needs to overlay the content.

Example
								
									

Fixed Header

The header can be given a fixed position by adding the .header-fixed class to the .header wrapper. Note: applying this class will set its position to "fixed" on desktop only; not only mobile. This will fix the header to the top of the screen even when scrolling occurs.

Example
								
									

Fixed Header on Mobile

By default header has a position set to static on mobile. Switch it to fixed by adding the .header-fixed-on-mobile class to the .header wrapper. Note: applying this class will set its position to "fixed" on mobile only; not on desktop.

Example
								
									

Transparent Header

By default the header has a background color set. To remove the background color, which is useful when applying classes such .header-absolute or .header-fixed, add the .header-transparent class to the .header wrapper. Note: applying this class will swap the color of navigational elements to white by default.

Example
								
									

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 header further as necessary. Below is an exmaple 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
								
									

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, add the .nav-dark class to the .header wrapper. This will make the main navigation darker and more appropriate for lighter backgrounds.

Target .nav-dark to change default dark colors as necessary.

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

Example

Adding Custom Nav Items

With the new structure it's easy to custom navigational elements such as buttons or icons to the header. Here is an example of how to add a button to the main navigation:

Note: Any navigational links (a tags) added to the header navigation will automatically take the height and line-height of the header. Elements such as buttons, dropdowns or other custom navigational elements, need to be wrapped in a div given the class .v-align-middle to ensure they are vertically aligned irregardless of their height.

Example