Loading...

Top Menu

We no longer maintain the Knowledge Base since version 4.3.x. All the latest user and developer documentation for 4.3.x and newer versions is now available at docs.cs-cart.com.

  • This article applies to CS-Cart versions:
  • 3.0.x

One line category listing in the top menu is preferred by design. Though multi-line menus are technically supported, they are not recommended to use.

The menu is two-level deep.

All changes are applied with the help of the add-on MyChanges.

First Level


It is processed by the selector ul.dropdown-multicolumns.

The background can be changed by settings the properties background-color and background-image:

1
background-color: 000099px;

Modify the property border-radius to adjust corner rounding: make them square:

1
border-radius: 0px;

or more rounded:

1
border-radius: 12px;

Changing font size is not recommended as it will affect the total word length, and some menu items may fall to the second row.

Font color, though, can be safely changed. Modify the property color in the selector ul.dropdown-multicolumns li:

1
2
3
ul.dropdown-multicolumns li {
	color: yellow;
}

Mind the link colors for the menu items on mouse hover and for active menu items. Modify the property color in the selectors ul.dropdown-multicolumns li:hover a and ul.dropdown-multicolumns .cm-active a respectively.

Menu Items

Basically, the same selector ul.dropdown-multicolumns li a is responsible for menu items singular, and you can modify the same set of parameters as for the whole menu:

1
2
3
4
ul.dropdown-multicolumns li a {
	border-radius: 0px;
	background-color: #000099;
}

or like that:

1
2
3
4
ul.dropdown-multicolumns li a {
    border-radius: 0px;
    background-color: #009900;
}

Keep in mind the selector ul.dropdown-multicolumns > li:hover to handle menu item appearance on mouse hover. Possibly, the correct background will have to be set, or removed:

  • When the selector is not defined:

  • The selector is defined as:

    1
    2
    3
    
    ul.dropdown-multicolumns > li:hover {
        background: none;
    }

Second Level

Analogous to the first level: background, font, and border can be modified, as well as corner rounding radius.

The group of selectors should be modified together:

1
2
3
.dropdown-1column, .dropdown-2columns, .dropdown-3columns, .dropdown-4columns, .dropdown-5columns, .dropdown-fullwidth {
    ...
}

Subcategory underlining is defined by settings the property border-bottom in the selector ul.dropdown-multicolumns h3.

Links are described by the selector ul.dropdown-multicolumns li a.

Playing with the properties, you have a wide space for the top menu look customization: