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.
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 |
|---|---|
| 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. |
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 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.
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.
