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:

https://foundation.zurb.com/sites/docs/magellan.html#sticky-navigation

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.

https://foundation.zurb.com/building-blocks/navigation.html

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:

<?php
/**
* 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' ); ?>

</div>

</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: 0 - 0 votes

Popular Add-ons

Home Control for Vantage

Widgetized Vantage home page including a grid view for easier control.


(10)
$29

Authorize.Net

Easily start accepting online payments via credit card and e-check.


(4)
$39

Sorted Filtered Coupons

Sorting and Filtered Coupons on coupons listing pages as well as search…


(3)
$19