Saturday, 07 May 2016 16:17

Header Canopy

Written by

You should see a canopy on top of this page. This is a great little item. You can add a canopy onto the top of your website which adds some atmosphere to it. This is specific to a joomlashine template but can easily be changed to any site.

CSS

/*-- Header Canopy --*/

/* Set Header Size - also corrects for mobile*/
#jsn-header {
	padding-top: 140px;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
	#jsn-header {
		padding-top: 60px;
	}
}

/* Background Image */
#jsn-page {
	background-image: url(/images/kb/2016/789/canopy.png);
}

#jsn-page {
	background-size: 100% auto;
	background-repeat: no-repeat;
}

/* This stops the canopy from ever expanding (optional) */
@media only screen and (min-width: 1170px) {
	#jsn-page { 
		background-size: 1170px;			
		background-position: top;
	}
}

Notes

  • From the JSN Gruve Template
  • There are different coloured canopy graphics with this template that you can use. I think there is also the source PSD so you can modify it yourself.
  • You do not have to use this graphic. You can use anything you want.
  • Depending on the type of the tempalte you have the canopy might keep stretching
  • The canopy is rigged to stop expanding at 1170px but you can remove the rule for this and then it will keep expanding i.e. 100%
Read 968 times Last modified on Saturday, 07 May 2016 16:58