Interface

Navi+ provides several common configuration options for menus, in the "Design" tab, such as background, typography (font familly, size..) , and icons/images (size, gap, curve...). By using these settings, your menu can usually be styled to match the overall design and branding of your website.

Navi+ menus support up to 3 levels. In the "Design" tab, you can only configure the style for 2 levels, and there is no direct option to set font size or icon/image size for level 2 and level 3 menus. So how can you do that?

Deep menu customization with the CSS & Coding tool

However, if you or your website developer have a basic understanding of CSS (Stylesheets), you can customize the entire menu design using the built-in "CSS & Coding" tool in Navi+ without editing your theme files directly. This offers several benefits:

• You can separate CSS configurations for Navi+ menus from your theme. This means upgrading or changing your theme won’t affect your Navi+ menus.

• Navi+ uses a smart protection mechanism by automatically adding a prefix (like #SF-123456789) at the start of each CSS rule. This keeps CSS for different Navi+ menus isolated, minimizing the risk of style conflicts.

• If needed, you can still add CSS that affects the entire website directly within Navi+, though this should be used sparingly and only when necessary.

Important note: The Internal Stylesheet / CSS textbox automatically adds a prefix (e.g., #SF-123456789) before each CSS rule. This ensures that your CSS only applies to the specific menu being customized and prevents style conflicts.

Some typical case studies of using CSS

1) To configure the appearance of the entire menu at the highest level, you can write a snippet that is not standard CSS but very simple. For example, the snippet below changes the menu background to red. Add the following code to the Internal Stylesheet / CSS textbox:

{
    background: red;
}

2) Configure size, typography, and colors for each menu item level. Add the following code to the Internal Stylesheet / CSS textbox:

// Customize the text style of level 1 menu items
ul > li.item > .inner .name {
    font-size: 14px;
    color: red;
}

// Customize the text style of level 2 menu items
ul.children[menulevel="2"] > li.child > .inner .name{
     font-size: 16px; 
     color: blue;
}

// Customize the text style of level 3 menu items
ul.children[menulevel="3"] > li.child > .inner .name{
     font-size: 13px; 
     color: green;     
}

3) Change font thickness using font-weight.Add the following code to the Internal Stylesheet / CSS textbox:

// Set the font thickness of name
.name {
  font-weight: 700;
}

// Set the font thickness of description
.description {
  font-weight: 700;
}

4) Adjust the size of the arrow. Add the following code to the Internal Stylesheet / CSS textbox:

ul > li.is-parent-top::after {
  font-size: 24px !important;
}

By default, Navi+ checks the current page URL to show the active state on the menu (using a gray background). This helps your customers navigate more easily.

However, the active state is not always necessary, especially on wide desktop screens where there are other ways to indicate "where you are," such as breadcrumbs. Sometimes, you may want to remove the active state to make the menu look cleaner.

Here’s how to do it:

Method 1: If you want to apply it only to this menu only, the CSS code is as follows (paste it into the Internal Stylesheet / CSS box):

ul li.navi-active {
  background: initial;
}

Explanation: This adds a CSS rule like #SF-123456789 ul li.navi-active { background: initial; } to the page, applying only to this menu (with embedID SF-123456789) and not affecting other menus.

Method 2: If you want to remove all active effects across all Navi+ menus, use the following code (paste it into the Global Stylesheet / CSS box):

.naviItem ul li.navi-active {
  background: initial;
}

Some mega menus can be very tall. In that case, expanding a level 3 menu may not leave enough space. When this happens, you should pin the level 3 menu to the top instead.

Paste it into the Internal Stylesheet / CSS box:

ul.children[menulevel="2"] li.child.is-parent.menu-expand {
  position: initial;
}

ul.children[menulevel="2"] li.child.is-parent.menu-expand ul.children[menulevel="3"]{
  top: 0px;
}