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

FeedPress for Clipper

Customize & place a widget of your coupons on users' websites


Ads By Category or Ad Tag

Display ads from specific category or categories by using a filter widget.


Coupon Countdown

Add dynamic countdown to show the expiry time left for each coupon