Editing top-header section

Some of the Matrix Themes have  top section in header with contact information or simple text title

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 is--flex cc-clearover">
                <div class="is--left size-12 add-top-10 add-btm-10">
                    <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>
                </div>
                <!-- end hs-right -->

                <div class="is--right is--left-mobile rel">
                    <div class="sc-wrapper custom-basket-color size-11">
                        <var>shoppingcart</var>
                    </div>
                </div>
            </div>
            <!-- end inner -->
        </div>
        <!-- end hs-top-header -->

        <div class="c">
        </div>

Usually, it's a phone number and an email. You can also remove completely one of them:

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

If you want to delete completely this section, please make sure you don't have other elements here such as shopping cart or magic area  displaying social links.

In this case, you  can  only delete the contact information on the left side and the best way to do  it is simply adding the class hidden like this:

<div class="hs-top-header bg-white">
            <div class="inner is--flex cc-clearover">
                <div class="is--left size-12 add-top-10 add-btm-10 hidden">
                    <div class="fa fa-mobile">
                    </div>
...
                     

The contact information can be also hidden only on mobile and visible only on desktop devices.

Here are the helper classes that can be used here:

• hide-mobile - hide on tablet and mobile devices
• hide-mobile-only -  hide only on mobile devices

<div class="hs-top-header bg-white">
            <div class="inner is--flex cc-clearover">
                <div class="is--left size-12 add-top-10 add-btm-10 hide-mobile">
                    <div class="fa fa-mobile">
                    </div>
...