Navigation

Page Heading Some Tagline

  1. Home
  2. Header Styles

Header 1

To use this header add header.css from css/components folder and then add class header-1 to the section having id/class home-header with following markup. To see the demo just click the `Header 1` button and see the header of this page
Note: There is no use of .bg-wrapper div for this header options so you can remove it while using it.

Header 2

To use this header add header.css from css/components folder and then add class header-2 to the section having id/class home-header with following markup. To see the demo just click the `Header 2` button and see the header of this page
Note: Breadcrumb has no use in this type of header so you can remove it while using this header
To change the background image of header just change the url of background-image style property of bg-wrapper div which is used as inline css on bg-wrapper div

Markup

							
							
<!-- Header Markup -->
<section class="header-2 home-header">
	<div class="bg-wrapper" style="background-image:url('img/backgrounds/bg-image-2.jpg')"></div>
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<!-- Heading and tagline of page -->
					<h3 class="heading">Page Heading <small>Some Tagline</small></h3>
					<!-- Breadcrumb -->
					<ol class="breadcrumb right middle">
						<li><a href="#"><span class="fa fa-home"></span>Home</a></li>
						<li class="active"><span class="fa fa-bookmark"></span>Header Style 2</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
</section>