This guide will demonstrate how to add social icons or any other custom widget to the header of your website.
1. In the 'Shortcodes' section of admin menu, copy the social links and paste them into the footer of your website using the 'Widget/HTML' module.
2. Within the Widget/HTML code, add the class 'hs-magic.' Afterward, refresh the page, and you will observe the icons now appearing inside the header, although edited in the footer.
How to edit
After the icons appear in the header, you can edit them in the footer at the same position where you initially added them. To find the code for editing in the footer, hover over widget/HTML. The code will be displayed as shown below:
For easy access to the code of the social links in the footer, it's recommended to add it as the last module in the footer
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.