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.
Displaying the Header
To add the shortcode:
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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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.
