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

Header

01. Navigation alignment

Almost all Matrix Themes support the navigation alignment with 3 positions of your main menu: left, center and right.

In admin menu, go to Design > Custom Template > HTML tab and find the following line:

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

In this line you can setup the global styles of your templates. You fill find different classes. The ones with double underscore are deactivated. 

For the main navigation alignment, you can use the following classes:

  • has-left-nav
  • has-right-nav
  • has-center-nav

02. Navigation size and color

The navigation size and font weight can be setup  directly in HTML

Design > Custom Template > HTML Tab

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

In this line you fill find the following classes:

  • size-16 ( you can change it for your own preference using the classes from size-11 to size-20.)
  • weight-400 ( font weight value used by Google fonts )
  • snip-nav ( this class displays the animated underlined menu ). If you remove it or just add the double underscore snip-nav__ , the navigation will be using the main accent color for hover and active states.

Animated underlined menu

It can be customized in CSS > section Layout


.snip-nav a:before {
  bottom: 0;
  display: block;
  height: 1px; /* the height of the underlined line */
  width: 0%;
  content: "";
  background-color: currentColor; /* the color of underlined line */
}

03. Hiding the shopping cart icon

The shopping cart icon appears only if you add a module 'Store Item' ( even if on a hidden page or just displaying a test product ), so if you remove it, the shopping cart won't be displayed in the header.

There's a way to hide the shopping cart manually in HTML by adding a class no-icon like this:


 <div class="sc-wrapper custom-basket-color size-11 no-icon">
      <var>shoppingcart</var>
 </div>


In this case the shopping cart will be displayed only when you add a store item to the shopping basket.

04. Displaying the social icons

Use a regular widget Social icons from the section Shortcodes inside the footer and then add a class hs-magicto appear in the header. 

Please note that you'll need to refresh a page to see the effect.


<div class="hs-social hs-magic new-social small-social left-align size-11 is-circle-solid-white is-rounded link-dark">
...


The social icons, once appeared in the header, can be edited in the same section/position you added them in footer.

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