• Skip to primary navigation
  • Skip to content

Paul Chinmoy

Web Developer

  • Home
  • Tips
  • Contact
  • My account
  • Call: +919681499646

Creating The Vertical Header in Astra Theme

September 5, 2018 Leave a Comment

  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • LinkedIn
7shares
Vertical Header Bar in Astra Theme

Creating the vertical header using the Beaver Builder plugin in Astra theme. In this tutorial I am showing how you will achieve this with our popular two tools: Beaver Builder plugin and Astra theme.

At first we remove the global header from entire site. I have not Astra Pro. So I did this. It will entirely remove the site header from your Astra site.

Now we shall create a template with Beaver Builder plugin.

  • Login to Dashboard
  • Navigate to Builder -> Templates page
  • Click on Add New button
  • Drag&Drop the one column row
  • Resize the row width. I set into 340px
  • Add the modules. I used Heading, Separator Menu & Icon Group
  • Click on Row Settings Wrench Icon and add “vertical-header” CSS class name under Advanced tab
  • Publish the template

Template will be look like this (see the attached image) :

Vertical Header Template
Vertical Header BB template

Afterthat we add this Beaver Builder template on our site and use it as vertical header bar. Open the functions.php file of your astra child theme and add this PHP snippet at end of the file:

Insert Beaver Builder Layout
1
2
3
4
add_action('astra_header_before', 'vertical_header', 1);
function vertical_header() {
    echo do_shortcode('[fl_builder_insert_layout id="110"]');
}

[fl_builder_insert_layout] is a Beaver Builder shortcode which is inserting the Beaver Builder template into your site. We are using it when we are putting the template in a PHP file.

110 is my template ID. You will replace it with your own template ID or you can use the slug instead of the ID.

This is the final step. We need some CSS to put this template at left side. Open your style.css file of you astra child theme and add this CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.vertical-header {
    border-right: 1px solid #ede3e3;
    display: block;
    height: 100%;
    padding-top: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    z-index: 99;
}
 
.site-content,
footer {
    margin-left: 340px;
}

Now refresh the home page and you will get the vertical header bar at left side.

Note: I did not make the mobile responsive effect. You can easily do it with Beaver Builder. Create another new template for Medium and Small device and place this template via shortcode.

  • Facebook
  • Twitter
  • Google+
  • Pinterest
  • LinkedIn
7shares

Filed Under: Advanced, Code, PHP Tagged With: astra child theme, astra header, vertical header, vertical menu

Related Posts

[Advanced Woo Search] Displays SOLD instead of Out Of Stock Status

Removes Product Short Description Box from WooCommerce Product Edit Screen

Adds Toggle Search Icon to OceanWP Theme’s Top Bar

Displays Multiple Post Types on BB Posts Module

Changes The Default WooCommerce Product Tabs to an Accordion

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2019. All Rights Reserved.