Header

General information

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 👇

React
Vue
React
<Header />
Vue
<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 👇

React
Vue
React
// Primary navigation, center align
<Header navPosition="center" />
​
// Primary navigation, right align
<Header navPosition="right" />
Vue
// Primary navigation, center align
<c-header nav-position="center" />
​
// Primary navigation, right align
<c-header nav-position="right" />

Header component comes with a bunch of options 👇

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 👇

React
Vue
React
// Hide both primary and secondary navigation
<Header hideNav />
​
// Hide the secondary navigation only
<Header hideSignin />
Vue
// 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 👇

React
Vue
React
<Header bottomDivider />
Vue
<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 👇

React
Vue
React
<Header bottomOuterDivider />
Vue
<c-header bottom-outer-divider />

TL;DR

React props

Prop

Type

Default

Accepted values

navPosition

string

-

It's left by default, accepts center and right

hideNav

boolean

false

-

hideSignin

boolean

false

-

bottomOuterDivider

boolean

false

-

bottomDivider

boolean

false

-

Vue props

Prop

Type

Default

Accepted values

nav-position

string

-

It's left by default, accepts center and right

hide-nav

boolean

false

-

hide-signin

boolean

false

-

bottom-outer-divider

boolean

false

-

bottom-divider

boolean

false

-

In React and Vue, navigation links should be handled into to the header components.

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

Learn more about the Sass logic behind each template.