Header

The header is structured in this way 👇

<header class="site-header">
	<div class="container">
		<div class="site-header-inner">
		
			<!-- Logo image or site name -->
			<div class="brand">
				<h1 class="m-0">
					<a href="#">
						<!-- Site name, or image (ideal size: 32x32px) -->
					</a>
				</h1>
			</div>
			
			<!-- Hamburger button for mobile -->
			<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu" aria-expanded="false">
				<span class="screen-reader">Menu</span>
				<span class="hamburger">
					<span class="hamburger-inner"></span>
				</span>
			</button>
			
			<!-- Header navigation -->
			<nav id="header-nav" class="header-nav">
				<div class="header-nav-inner">
				
				  <!-- Primary navigation -->
					<!-- It supports .header-nav-center and .header-nav-right classes -->
					<ul class="list-reset text-xxs">
						<li>
							<a href="#">Header link</a>
						</li>
					</ul>
					
					<!-- Secondary navigation (e.g. CTA buttons) -->
					<ul class="list-reset header-nav-right">
						<li>
							<a class="button button-sm" href="#">Sign up</a>
						</li>
					</ul>
					
				</div>
			</nav>
		
		</div>
	</div>
</header>

In React and Vue, the header component is located into the /src/components/layout/ folder, and it can be imported/used in this way 👇

<Header />

<c-header />

Logo

For every templates we include a SVG logo (shipped in the /src/images/ folder), and the recommended size is 32x32px.

<img src="images/logo.svg" alt="Abstract" width="32" height="32">

In React and Vue, the logo is included as a partial file, and it’s stored in the /src/components/layout/partials/ folder.

Navigation alignment

As shown in the example above, the header can have a primary navigation (for menu links), a secondary one (for buttons), or both.

The primary navigation is left-aligned by default. You can center align the content by adding the .header-nav-center class, or you even right align it by using the .header-nav-right class.

Normally, the secondary navigation is right-aligned by default, so it comes with the .header-nav-right class by default on the latter <ul> element.

<!-- Primary navigation, left align -->
<ul class="list-reset text-xxs">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>

<!-- Primary navigation, center align -->
<ul class="list-reset text-xxs header-nav-center">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>

<!-- Primary navigation, right align -->
<ul class="list-reset text-xxs header-nav-right">
	<li>
		<a href="#">Header link</a>
	</li>
</ul>

You can use the navPosition (React) or nav-position (Vue) props on the header component to change the primary navigation alignment 👇

<!-- Primary navigation, center align -->
<Header navPosition="center" />

<!-- Primary navigation, right align -->
<Header navPosition="right" />

<!-- Primary navigation, center align -->
<c-header nav-position="center" />

<!-- Primary navigation, right align -->
<c-header nav-position="right" />

Hide navigation

While hiding primary and secondary navigation it’s just a matter of deleting a few lines of code in the HTML template, in React and Vue we have provided a couple of options to speed up the process. Let’s have a look at the example below 👇

<!-- Hide both primary and secondary navigation -->
<Header hideNav />

<!-- Hide the secondary navigation only -->
<Header hideSignin />

<!-- Hide both primary and secondary navigation -->
<c-header hide-nav />

<!-- Hide the secondary navigation only -->
<c-header hide-signin />

Bottom borders

If you want to display a border at the bottom of the header area, you can use the .has-bottom-divider helper class like in the example below 👇?

<header class="site-header">
	<div class="container">
		<div class="site-header-inner has-bottom-divider">
			<!-- header content -->
		</div>
	</div>
</header>

In React and Vue there is a prop for that 👇

<Header bottomDivider />

<c-header bottom-divider />

For a full-width divider, add the .has-bottom-divider class to the .site-header element 👇

<header class="site-header has-bottom-divider">
	<div class="container">
		<div class="site-header-inner">
			<!-- header content -->
		</div>
	</div>
</header>

In React and Vue there is a prop for that 👇

<Header bottomOuterDivider />

<c-header bottom-outer-divider />

TL;DR

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/layout/_header.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/layout/_header.scss
👆 Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/layout/_header.scss
👆 Use this to add custom CSS