This section is part of the header on the right side of the header, where you can place any "Gadget/Widget", but it is recommended that only "buttons or icons of social networks" are placed.

When placing several "Gadgets/Widgets" they are automatically ordered one next to the other. we show the following examples.

Go to Layout > Header > Header - section headerBar Right > click on "Edit" and apply the below:

To add the "Social Media Icons" and the "buttons" we will use the following gadgets.

Add A Gadget "HTML/JavaScript" for the "Social Media Icons".

Add A Gadget "Pages" for the "Buttons".

→ Social Media Icons

Each of these lines of code is a Social Network icon.

To add the icons

1. "Select" copy the code line

2. Paste it on the gadget "HTML/JavaScript"

3. change "#" By your link and Save.

Note: This information applies in the same way to sections ( Top Bar, Footer Bar ).

<!-- Add font awesome icons -->

<a href="#" class="fab fa-facebook"></a>

<a href="#" class="fab fa-facebook-messenger"></a>

<a href="#" class="fab fa-whatsapp"></a>

<a href="#" class="fab fa-twitter"></a>

<a href="#" class="fab fa-google"></a>

<a href="#" class="fab fa-linkedin"></a>

<a href="#" class="fab fa-youtube"></a>

<a href="#" class="fab fa-instagram"></a>

<a href="#" class="fab fa-pinterest"></a>

<a href="#" class="fab fa-snapchat-ghost"></a>

<a href="#" class="fab fa-skype"></a>

<a href="#" class="fab fa-android"></a>

<a href="#" class="fab fa-dribbble"></a>

<a href="#" class="fab fa-vimeo"></a>

<a href="#" class="fab fa-tumblr"></a>

<a href="#" class="fab fa-vine"></a>

<a href="#" class="fab fa-foursquare"></a>

<a href="#" class="fab fa-stumbleupon"></a>

<a href="#" class="fab fa-flickr"></a>

<a href="#" class="fab fa-yahoo"></a>

<a href="#" class="fab fa-reddit"></a>

<a href="#" class="fab fa-apple"></a>

<a href="#" class="fab fa-behance"></a>

<a href="#" class="fab fa-blogger"></a>

<a href="#" class="fab fa-bootstrap"></a>

<a href="#" class="fab fa-mailchimp"></a>

<a href="#" class="fab fa-telegram-plane"></a>

→ Buttons

We will show you the two ways that buttons can be added.

First form.

1. Add a gadget and select "Pages".

2. Click "+ Add External Link" to add a list of pages.

3. Page title "Your title".

4. Web address (URL) "Your link".

5. click "Save link" to add and save our list.

Second form.

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap Buttons documentation

1. "Select" copy the code line.

2. Paste it on the gadget "HTML/JavaScript or Gadget Text"

3. change "#" By your link.

4. change "primary" or "secondary" by your name and Save.