Customizing WPML navigation
WPML comes with drop down navigation, sidebar and a breadcrumbs trail. The default appearance is set by the plugin’s CSS files located in wp-content/plugins/sitepress/modules/cms-navigation/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 I’ll explain what each part does.
#menu-wrap – the drop down top navigation
Styling the drop down menu using the visual CSS generator
The drop down menu design tool allows designing the menu visually. It’s highly recommended and very easy to use. This tool will produce correct CSS, free of any bugs which can cause the drop down menu to stop functioning.
You can select the colors, sizes, fonts and padding for the different elements of the drop down menu. The tool shows an instant preview of how your menu will look like and produce the CSS to copy and paste in your stylesheet.
Styling the drop down menu by manually editing the CSS
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;
}
Sidebar navigation
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 a H4. 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 */
}
Breadcrumbs trail
The breadcrumbs trail shows the current page and how to get back from it to the home page. It’s a DIV with class ‘cms-nav-bc’ 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 */
}
English 
Subscribe via RSS
Follow
Having started with the original Sitepress release I’ve now got WPML working on a couple of different test sites, and I do rather like the multilingual capabilities, but sadly I’m starting to find that for the purposes of constructing and managing navigation it’s neither sufficiently granular nor sufficiently flexible for my needs.
Consider a page-based web site in which one needs
1] a single level top menu [no dropdowns]
2] a context sensitive sidebar navigation which changes according to the top level item selected, or according to the secondary/tertiary level item selected.
3a] to extend the sidebar navigation with links or other custom items which are not formally a part of the site page/post heirarchy
3] no breadcrumbs
As far as I can see there’s no relatively simple manner in which to construct such navigation. The php functionality doesn’t [seem to] expose any finer granularity, so even if one hacks the css one still can’t achieve the required level of control.
We also have an issue with ‘editing’ or managing the text of menu entries to control presentation and layout etc.
Hi Robert,
Your suggestions make very good sense. So that we can track them, can you open individual issues in our forum?
is there a way to exclude some categories from Blog page (i.e. from Category menu)?
for example when i want to show some of categoriy posts on some other pages and not on a Blog page.
thx!
Hi Mario,
This isn’t possible now, but sounds like something that WPML needs to allow.
Have you raised this in our forum? If not, start a new thread so that this doesn’t go forgotten.
We’ll add it to our todo list.
hey, the forum won’t let me post! Not even to reply, keeps throwing up an error (topic not found. duh! that’s why I was posting)
Anyway, this is working brilliantly for pages. but categories/posts won’t show up in the sidebar, but do show in the breadcrumbs when I preview post (the only way to get to see them).
Any ideas?
hi
wpml makes a menu likes this:
page01 page02 page03 page04 categories
What I want is this:
categories page01 page02 page03 page04
how can I do this?
WPML cannot do this right now, but it’s on our todo list.
We’ll post a message about it when it’s ready. If you like to get notified, you can add yourself to our mailing list.
Hello,
My top level navigation needs to be image-based, not text-based. (Dropdown menus will be text.) Is this possible with this plugin? I’m somewhat comfortable with CSS.
Thank you,
Laura S.
I’m relatively new to WPML but am enjoying working with the navigation functionality. I just have a few questions:
1. Is it possible to reorder/specify an order to the Sections?
2. Is it possible to make the section titles have a hyperlink?
3. Is it possible to add a third-level drop down?
Thanks in advance.
Just thought I’d post these few things in terms of navigation customization.
I need relatively high level of menu customization for some of my navs and while this plugin is great it’s very hard to target specific parent li(s) w/o the id or class attributes consistently being set. Which if you’re using a images for your nav, id or class is needed so you can move the sprite around (or whatever image method people use).
I had to edit the core file to get it to output what I need since I couldn’t nicely hook into the function. Which I hate doing cause when you update your plug-in mine get’s outdated. So I wanted to propose that you include the page slug as the id of AT LEAST the parent li so your output would look something like:
I’d also propose that you remove the
as that should be a completely optional piece of markup, especially since it appears after the wrapping div anyone could just as easily doMy last suggestion, would be to provide an option to disable the plugins CSS output. I just deregistered the styles in my functions.php, but it may be beneficial for other people to have GUI version if they don’t know their way around WP.
Thanks for the plug-in, it works amazingly.
Thanks for the suggestions. Can you please post this in the tech discussion section of the forum? This would also allow you to enter the code segments that you tried to paste here and WordPress removed.
Please, tell me how can I put the flags (pictures) to the slide-bar. Because of it`s absentce in default mode of your wonderful plug-in.
My PHP & WP knowlage is not good yet.
In WPML, click on ‘Advanced’. This will allow you to customize the language switcher. One of its options is to use country flags.
You can also create a custom language switcher with just flag and without the drop-down CSS effect:
http://wpml.org/?page_id=989
I can’t find any code to generate a simple drop down menu for the sidebar which I could customize. Anyone able to help?
WPML’s standard language switcher can be added as widget to the sidebar. As of WPML 1.5.0, you can customize it via WPML’s GUI – WPML->Languages.