Top-header section

Some of the Matrix Themes  can have the top-header section  with contact information or simple text title. Please check the below tutorial 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, it's a phone number and an 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.

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)