Top-header section

Some of the Matrix Themes can have the top-header section with contact information or simple text title. Please check the following tutorial about how to edit it.

This section can be edited directly in HTML.

Go to Design > Custom Templates > HTML tab and find the below section to edit:

<div class="hs-top-header bg-white">
                <div class="inner cc-clearover no-padding" style="border-bottom:1px solid #f0f0f0;">
                    <div class="left-align add-top-5 add-btm-5">
                        <div class="magic-field g-font hide-mobile">
                        </div>
                    </div>

                    <div class="right-align mobile-left add-top-10 add-btm-10 size-12">
                        <div class="fa fa-mobile">
                        </div>
                         &#160;(+46) 432‑582-02,&#160;  
                        <div class="fa fa-envelope add-left-10">
                        </div>
                         &#160;<a href="mailto:office@mail.se"> &#160; office@mail.se</a>
                    </div>
                    <!-- end hs-right -->
                </div>
                <!-- end inner -->
            </div>
            <!-- end hs-top-header -->

Usually, you need to edit the phone number and the email address

<div class="fa fa-mobile">
</div>
(+46) 432‑582-02,  

<div class="fa fa-envelope">
</div>
<a href="mailto:office@mail.se"> office@mail.se</a>

Once you finished editing, click the save button and the bottom to apply the changes.

Changing the color

The text  and link colors are the same as you setup globally for your site, however, sometimes you need to change it if you change the background color of the whole section.

You can use the following classes as shown below:

• color-white
• link-white
• size-12

  <div class="right-align mobile-left add-top-10 add-btm-10 size-12 color-white link-white">
                        <div class="fa fa-mobile">
                        </div>
                         &#160;(+46) 432‑582-02,&#160;  
                        <div class="fa fa-envelope add-left-10">
                        </div>
                         &#160;<a href="mailto:office@mail.se"> &#160; office@mail.se</a>
                    </div>

To remove completely this section, you can use the class hidden added to the hs-top-header:

<div class="hs-top-header bg-white hidden">
...

Important note!

Depending on the template structure, the section hs-top-header can include the magic area ( header social links) or shopping cart. So if you remove it, you will remove the other important elements of your website.

If your template doesn't have the top-header section, you can add it manually. 

Please select the green section and paste it's code BEFORE the hs-header section:

...
<div class="hs-top-header bg-dark">
                <div class="inner cc-clearover no-padding">
                    <div class="right-align mobile-left add-top-10 add-btm-10 size-12 color-white link-white">
                        <div class="fa fa-mobile">
                        </div>
                         &#160;(+46) 432‑582-02, &#160; 
                        <div class="fa fa-envelope add-left-10">
                        </div>
                         &#160;<a href="mailto:office@mail.se">&#160; office@mail.se</a>
                    </div>
                    <!-- end hs-right -->
                </div>
                <!-- end inner -->
            </div>
            <!-- end hs-top-header -->
            <div class="c">
            </div>

            <div class="hs-header cc-clearover">
...

Important notes!

The top-header section can't be added in Matrix themes with absolute position of the header ( see Lemberg, Nordland and other)