Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  1. Support

Top-header section

Common issues

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.

bg-grey mid-round add-5  wow animated fadeInUp

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

02. How to remove

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.

03. How to add

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)

SUPPORT

  • Blog
  • Support center
  • Tutorials
  • Common Support issues
  • Updates

QUICK LINKS

  • Advanced Style Editor
  • Features
  • Pricing
  • Pre Purchase Questions
  • Marketplace
  • Zødiac Framework
  • Jimdo Creator

WIDGETS

  • Instagram feed
  • Team Showcase
  • Animations
  • Parallax widget
  • Full width widgets
  • Countdown Timer
  • All Widgets

GET INSPIRED

  • Showcase
  • Custom widgets
  • Enterprise Package
  • No coding features
  • Matrix variables
  • Dolphin Block Elements
hide-in-doc-page

Showcase
draggable-logo

 

Main colors
   bg-primary
   bg-primary-light
   bg-primary-dark
   bg-secondary
   bg-secondary-dark
Template sections
   body
   top-header
   header
   content
Footer Styles
   background
   text color
   link color
   horizontal line
Buttons
   style 1
   style 2
   style 3
Other elements
  social icons
  navigation color
  subnav background
Mobile navigation
   background color
   navigation color
Template configurations
has-center-nav g-font
navigation styles
size-15 weight-400 snip-nav is-uppercase --line01
content styles
form-white
footer styles
o-form  color-white
Typography
Heading H1
weight-600 is-uppercase
Heading H2
weight-600 is-uppercase
Heading H3
weight-600 is-uppercase
Buttons
weight-600 is-uppercase
Animations
none

Note:
All changes made here will be applied to your entire website.
is-switcher admin-only

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

About | Privacy Policy | Cookie Policy | Sitemap
Copyright © 2022 All rights reserved
Log in Log out | Edit
  • Style Switcher
  • Common Issues
  • Installation
  • Guides
  • Blog
  • Updates
  • Marketplace
  • Scroll to top
Close