Headers

Headers are the top part of your page. We have created 7 variations for them, so they include multiple use-cases: blog, portfolio, shop, app, etc. The easiest way to use them is to select the one that is right for you and edit its content. To do so, you will need to be familiar with the Bootstrap Carousel. To see the full documentation for it, please go here.

Here is an example of a header with a custom carousel:

<div class="header header-5">
	<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute">
	  <a class="navbar-brand" href="#">grace</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-5" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <i class="navbar-toggler-icon fa fa-bars"></i>
	  </button>
	
	  <div class="collapse navbar-collapse" id="header-5">
	    <ul class="navbar-nav mr-auto mx-5">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">Clothes <span class="sr-only">(current)</span></a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="#">Stories</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#">Who we are</a>
	      </li>
	      <li class="nav-item d-block d-md-none">
	      	<a class="nav-link disabled" href="#">Shopping Cart</a>
	      </li>
	    </ul>
	    <div class="cart ml-auto d-none d-md-block">
	      <button class="btn btn-sm btn-icon btn-white" type="submit"><i class="fa fa-shopping-cart"></i></button>
	    </div>
	  </div>
	</nav>
    
    <div id="header-carousel-5" class="header-carousel carousel">
        <div class="row carousel-indicators">
	            <div class="col-md-3 ind active" data-target="#header-carousel-5" data-slide-to="0" >
	                Ref <i>&</i> Haim Collection
	            </div>
		        <div class="col-md-3 ind" data-target="#header-carousel-5" data-slide-to="1">
	                The Fall Wedding Collection
	            </div>
				<div class="col-md-3 ind" data-target="#header-carousel-5" data-slide-to="2">
				  	The New Collection		                
	            </div>
		</div>
		
		<a class="carousel-control-prev" href="#header-carousel-5" role="button" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#header-carousel-5" role="button" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		</a>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_51.jpg');">
                    <div class="content">
                        <h1 class="title">Ref <i>&</i> Haim collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_52.jpg');">
                    <div class="content">
                        <h1 class="title">The Fall Wedding Collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>                    
            </div>
            <div class="carousel-item">
                <div class="header" style="background-image: url('./assets/media/img/headers/header_53.jpg');">
                    <div class="content">
                        <h1 class="title">The New Collection</h1>
	                    <a href="#a" class="btn">
                            Shop Now
                        </a>
                    </div>
                </div>                    
            </div>
        </div>
    </div>
</div>