Header Shortcode

Updated on November 14, 2017

The header shortcode allows you to add an extra header functionality to the content of your site. This functionality gives the flexibility of placing the header section in non-standard places on the page.

In this article we’ll explain how to add and configure the header shortcode.

To see the header shortcode in action, check out the demo page.

Header shortcode - demo


Displaying the Header

To add the shortcode:

1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.

Header shortcode - visual composer screen

3In the Add Element pop-up screen, search for Header and click on it to be added to the page.

Header shortcode - add element

4When the shortcode is added, a new pop-up screen called Header Settings will open that allows you to configure the shortcode settings.

Header shortcode - Header settings

5Click on Save Changes and publish or update the page to check the result.

Configuring the Settings

There are a few general settings that allow to configure the header shortcode as you wish.

You’ll find the following options:

SettingDescription

Header Style Sets the header style. The only available header styles for the Header shortcode are: Style 1 and Style 3.
Hover Style Available only for header style 1. Sets the header hover style. Look into each option’s graphical representation and select the one that suits your design needs.
Menu Location Sets the menu you want to show in the header shortcode. For more information about the menu read the article How to Set up Menus in Jupiter.
Show Logo? Enable the option to show a logo in the header shortcode.
Burger Icon Sets the secondary menu. This menu will pop up once the burger icon is clicked. To change the secondary menu settings, go to: Theme Options > Header.
Show Search Icon? Enable this option if you want to show the search icon in the header shortcode.
Show WooCommerce Cart? Enable this option if you want to show the WooCommerce cart icon that displays the list of added products in the shopping cart. This feature is only available if the WooCommerce plugin is installed and activated on your Jupiter website.

Configuring the Header Shortcode Styling

If you want to align the header differently or set a custom color for the background and borders, you can edit the following options:

SettingDescription

Header Align Sets the alignment for the header. Available options are: Left, Center and Right.
Header Background Color  Sets the background color of the header shortcode.
Header Border Color Sets the border color of the header shortcode.
Header Links Color Sets the color of the menu items in the header shortcode.
Links Hover Skin Sets the menu link color on mouseover in the shortcode.

Adding a Custom Class Name

If you need to go beyond the default settings to customize the look of the item’s design, you can add a custom CSS class in the Extra Class Name setting to be able to add specific styling to the shortcode through CSS. For out more information, read the Adding a custom CSS class to a shortcode article.

Did this answer your question?