Footers

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 footer structure. This page will be available until all templates have been upated using the latest verison of the framework.

The footer has been redesigned from scratch to offer a simpler way of creating footer layouts. For more information on column widths, nesting and offsets, visit the Timber Framework Site. A footer is created as follows:

Example
								
									
								
							

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

CSS For Retina Displays

By default the footer does not have a background image, but we can easily add one and serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.footer{
										background-image:url(../images/slider/footer-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.footer{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

By default the to top button appears once the user has scrolled beyond 300px. This is useful when the to top button is used on its own. For times when it is placed within a footer wrapper we add the data-no-hide attribute to force its visibility at all time. Note: Attribute takes no value.

Example

Make the footer fixed by simply adding the class footer-fixed to the footer wrapper. Content margins will be calculated and adjusted automatically based on footer content height.

Example
								
									
								
							

As a fixed footer is revealed by the content wrapper, we can force the script to add a custom class to the content, to which we can add animation attributes. To do this we add the data attribute data-animate-reveal to the footer wrapper. This will add the class animate-content to the content wrapper the moment the footer is revealed.

Example
								
									
								
							
Animation Example: Scaling Content
								
									.animate-content{
										transform: scale(0.95);
										transition-duration: 500ms
									}