Footers

This template offers four predesign footers that are defined by the class .footer-X, where X represents the footer type (1-4) as shown below.

Example
								
									
								
							

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

CSS For Retina Displays

None of the footers have a background image by default, 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-X{
										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-X{
												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 when it appear within a footer wrapper, as it does for Footer Type 2,3 and 4, we add the data-no-hide attribute to force its visibility at all time.


A simple footer with centered logo and slogan, left aligned copyright statement and left aligned footer menu. Target .footer-1 to set background color or image.

footer example 1
Example
								
									
								
							

A minimal footer with centered back to top button, logo, slogan, and copyright statement. Target .footer-2 and .footer-2 .footer-bottom to set background color or image.

footer example 2
Example
								
									
								
							

A traditional footer with four columns by default. Footer employs the Timber framework content grid which means that you can easily change the number of columns by modifying the .content-grid-X wrapper, where X represents the number of columns (2-6). Target .footer-3 and .footer-3 .footer-bottom to set background color or image.

Note: Footer three also employs the equalize plug-in for matching columns heights on a per row basis, making sure rows are nice and even when screen size or orientation change. For this reason we add the .equalize class to the content-grid wrapper as shown below.

footer example 3
Example
								
									
								
							

Similar to footer type three but with an additional top area for logo or content. Footer employs the Timber framework content grid which means that you can easily change the number of columns by modifying the .content-grid-X wrapper, where X represents the number of columns (2-6). Target .footer-4 and .footer-4 .footer-bottom to set background color or image.

Note: As with footer three, footer four also employs the equalize plug-in for matching columns heights on a per row basis, making sure rows are nice and even when screen size or orientation change. The .equalize class is therefore added to the content-grid wrapper as shown below.

footer example 4
Example