Secondary Header Shortcode

Last Updated on

The Secondary 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 Secondary Header shortcode.

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

In this article


Displaying the Header

To add the shortcode:

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

secondary header shortcode

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

secondary header shortcode

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

secondary header shortcode

5
Click 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
Menu Location Use this option to select the navigation menu location you want the secondary header shortcode to have. Available options are: Primary Navigation, Second Navigation, Third Navigation, Fourth Navigation, Fifth Navigation, Sixth Navigation, Seventh Navigation
Squeeze Header? Enable this option to have the header height smaller as sticky header mode. Disable it if you want the height of the header be as normal none sticky mode.
Header Logo? Enable this option if you want to show logo in Secondary Header shortcode.
Header Search Icon? Enable this option if you want to show search icon in Secondary Header shortcode.
Header Cart?  Enable this option if you want to show shopping cart icon in Secondary Header shortcode. You need to have Woocommerce plugin installed for this option to work.
Header Wpml? Enable this option if you want to show language switcher in Secondary Header shortcode. You need to have WPML plugin installed for this option to work.
Header Wideness Use this option to set the layout of the header in the Secondary Header shortcode. Available options are: Boxed Layout, Screen Wide Full
Header Custom Height Use this option to set the Secondary Header height manually.
x
Note: Secondary Header shortcode does not support sticky header option.
x
Note: For more information about the menu read the article How to Set up Menus in Ken.

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 Border Top?  Enable this option if you want to add a border line at the top section of Secondary Header shortcode.
Header Align Use this option to set the alignment of the header in the shortcode. Available options are: Left, Center, Right
Background Color?  This option is under the Styling Settings tab. Use this option to set the background color for the shortcode.
Link Color? This option is under the Styling Settings tab. Use this option to set the link color for the shortcode.
Link Hover Color? This option is under the Styling Settings tab. Use this option to set the link color on mouse over for the shortcode.
Border Top Color?  This option is under the Styling Settings tab. Use this option to set the top border color for the shortcode.
Main Navigation Top Level Font Size This option is under the Styling Settings tab. Use this option to set font size for the first level of the menu in Secondary Header shortcode.

Configuring the Visibility for Devices

The Visibility for Devices setting in shortcodes allows you to hide / show the shortcode for a specific screen width. This settings is useful when you need to hide / show a section of your webpage for mobile devices, for example.

x
Note: To learn more about this setting, read the Configuring the visibility for devices article.

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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket