WPML CMS Navigation add-on plugin provides you with a drop-down navigation, sidebar navigation and a breadcrumbs trail. This page explains how you can customize these elements.

The default appearance is set by the plugin’s CSS files located in wp-content/plugins/wpml-cms-nav/res/css. There, you’ll find two files:

  • cms-navigation-base.css
  • cms-navigation.css

The cms-navigation-base.css file is something that you don’t really want to touch. It’s responsible for the drop-down menu’s functionality.

To customize, we recommend that you copy the cms-navigation.css file from the plugin directory and place it in your theme’s directory. Then, load it after you call wp_head(), which will load the plugin CSS files. This will guarantee that your customizations take effect.

We’ll go over the cms-navigation.css file together here and explain what each part does.

In some cases, you may need more control than the automatic CSS generator can offer. For example, wpml.org’s own drop-down menu uses styling elements that are not provided by it. Using such elements requires deeper understanding of the CSS code. We’ll explain each section here as a reference for more complex designs.

The top menu is wrapped in a DIV with an ID. This allows selecting it as a unique element in the CSS and applying formatting that will not be affected by other elements in your site.

/* style the menu navigation wrap  */
#menu-wrap {
background-color: #eee;
}

The menu itself is a list. Here is where you can change its background color.

#menu-wrap ul {
background-color: #5798d0;
}

This part determines the formatting for the top level elements (the tabs on top).

/* style the links for the top level */

#menu-wrap ul a, #menu-wrap ul a:visited {
text-decoration:none;
color:#000;
border-right:1px solid #fff;
}

/* top level items on hover */
#menu-wrap ul li:hover a, #menu-wrap ul a:focus, #menu-wrap ul a:active{
background-color: #5798D0;
color:#000;
}

/* style the top level hover */
#menu-wrap a:hover, #menu-wrap ul ul a:hover{
color:#000;
background:#5798d0;
}

#menu-wrap :hover > a, #menu-wrap ul ul :hover > a {
color:#000;
background:#B3D9FF;
}

When a menu has children, the plugin adds the “trigger” class. It’s used to show the drop-down menu, so it’s a pretty crucial element. You can use it to add a hint to the user that there’s something below that menu. The default formatting adds a down arrow.

/* menu sections with children */
#menu-wrap a.trigger, #menu-wrap a.trigger:hover, #menu-wrap a.trigger:visited {
background-image: url(../img/cms-nav-dark-s.gif);
background-repeat: no-repeat;
background-position: right center;
}

WPML allows creating sub-sections within the navigation. When a page is marked as a section head, the corresponding list item gets a “section” class.

/* style sections from the dropdown menus */
#menu-wrap li.section{
color: #fff;
background-color: #4283b7;
font-weight: bold;
}

The drop-down menus include the pages below the top-level pages. Each entry is a list item. You can control the different states including display, hover and visited.

/* style sections from the dropdown menus */

/* style the second level links */
#menu-wrap ul ul a, #menu-wrap ul ul a:visited {
color:#000;;
}

/* style the second level hover */
#menu-wrap ul ul a:hover{
background:#B3D9FF
}

#menu-wrap ul ul :hover > a {
background:#B3D9FF
}

The plugin will highlight the currently displayed page in the drop-down menu. It’s marked as selected_page.

/* style selected page in the top menu */
#menu-wrap li.selected_page{
color: #004D99;
background-color: #5798d0;
}

/* style selected subpage in the top menu */
#menu-wrap li.selected_subpage{
color: #004D99;
background-color: #B3D9FF;
}

#menu-wrap li.selected_subpage a, #menu-wrap li.selected_subpage a:visited{
background-color: #B3D9FF;
}

#menu-wrap ul ul li a.selected{
background-color: #D0D8F0;
color: #004D99;
}

The sidebar navigation shows the current page in the context of its parent and siblings. It’s not a simple list of all pages in your site, but rather a sub-tree spanning just the relevant pages around the currently displayed page. By default, the heading in the sidebar is an H4 tag. You can change it in the plugin’s admin page.

Are you can see, there’s no default formatting for the sidebar. You can start with scratch.

/* style sidebar navigation */

#sidebar-navigation h4{
/* style sidebar title */
}

#sidebar-navigation .cms-nav-sidebar a, #sidebar-navigation .cms-nav-sidebar a:visited{
/* links */
}

#sidebar-navigation .cms-nav-sidebar a:hover, #sidebar-navigation .cms-nav-sidebar a:focus,
  #sidebar-navigation .cms-nav-sidebar a:active{
/* links hover */
}

.cms-nav-sidebar .selected_page_side{
/* selected item in side navigation */
}

The breadcrumbs trail shows the current page and how to get back from it to the home page. It’s a DIV with the cms-nav-bc class that contains links separated by spaces.

.cms-nav-bc a, .cms-nav-bc a:visited{
/* trail navigation links */
}

.cms-nav-bc a:hover, .cms-nav-bc a:focus, .cms-nav-bc a:active{
/* trail navigation links hover */
}

.cms-nav-bc{
/* trail navigation links hover - not linked */
}