How to Make a Sticky Header for the Vantage Theme

This post is about how to make a sticky header for the Vantage theme.

Steps for Making the Sticky Header

Step 1

You should first read the following on how the Foundation Framework documentation. You can read about sticky navigation here:

Have a look at the following page to find the option you want to use. There are many different sticky navigation options. You will need to find the one that fits your needs the best.

Step 2

Copy header.php from Vantage folder to your child theme folder.

Step 3

Edit new child theme header.php file so it looks like following:

* The template for displaying the header
* Displays all of the head elements.
* @package Child Vantage
* @since 4.0.0
<header class="header" role="banner" data-sticky-container>

<div data-sticky data-options="marginTop:0;">

<?php get_template_part( 'parts/nav-top-bar-primary' ); ?>

<?php get_template_part( 'parts/nav-top-bar-secondary' ); ?>


</header> <!-- .header -->

<?php get_template_part( 'parts/nav-mobile-title-bar' ); ?>

Step 4

Add following styles to your child theme styles.css:

[data-sticky] {
  width: 100%;
.sticky-container {
  z-index: 15;

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: none
Rating: 3 - 2 votes

Popular Add-ons

AdPoster Blocker

A simple but powerful plugin that blocks spammy new user regs and/or…


AppThemes Coupons

Start offering coupons and promotions to your customers.



Accept up to eight payment methods, fifteen languages, & twenty six…