Pinning the Header & Footer on Your SmugMug Site - Fine Art Prints for Sale

Pinning the Header and Footer

If you want to pin both the Header and Foooter, add this to your theme’s CSS. If you just want to pin them on selected pages, add a CSS block to the selected pages.

You can view a live demo here.

CSS


/**
* Pins Header and Footer
************************************************/	
.sm-user-ui .sm-page-header, 
.sm-page-header.sm-user-ui, 
.sm-user-ui .sm-cart-header,
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
	position: fixed;
	width: 100%;
	}
	
.sm-user-ui .sm-page-header, 
.sm-page-header.sm-user-ui, 
.sm-user-ui .sm-cart-header {
	z-index: 100;
	}	
	
.sm-user-ui .sm-page-layout-region-header,
.sm-user-ui .sm-page-layout-region-footer {
	z-index: 10;
	}	
	
.sm-user-ui .sm-page-layout-region-body {
	padding-top: 175px; /* Adjust this for your logo/nav */
	}

.sm-user-ui .sm-page-layout-region-footer {
	bottom: 0px;
	}

Powered by SmugMug Log In