Editing top-header section

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

How to edit:

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.

Tips & suggestions

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

Matrix themes Close

Documentation Quick setup Select a color Select a font Shortcodes Helper classes Updates Enterprise package Help Showcase Marketplace

Editing top-header section

How to edit:

Tips & suggestions

Support

Quick links

Get inspired

Editing top-header section

How to edit:

Tips & suggestions

Support

Quick links

Get inspired

Strictly necessary

Functional

Performance

Marketing / Third Party

Cookie Policy