Skip Navigation

Are you using WPML’s navigation? If you’re anything like me, you could use some help customizing the stylesheet of the drop down menu.

It’s a fairly complex stylesheet, containing defailed formating for the top menu, the drop downs, selected tabs and menus and mouse hover.

The online drop down menu customization tool

Drop down menu customization tool
Drop down menu customization tool

The new drop down menu customization tool will make this job much easier. It includes three sections:

  • A form for entering your design.
  • A preview of how your drop-down menu will look like.
  • The CSS code you should include in your stylesheet.

Bonus round — load in your existing design and keep editing with the tool

If you’ve alrady created your customization, you can still use this tool. Copy the CSS and paste to the CSS box in the customization tool. Then, click on ‘Load values from CSS’. The design parameters in the form will update according to your current stylesheet and you can continue from that point.

Additional customization

This online tool covers many customization options, but CSS gives you endless options for creating your own design. For example, our own drop down menus, here in WPML, look quite different than what this tool can generate.

You can add CSS yourself, to get more advanced visual effects. We’ve used background images to the top tabs to give a nice gradient effect.

If you decide to add your own hand written CSS, I suggest that you include it in a seperate file from what the generator creates. This way, you can use the generator for styling the major elements and your hand-written file will add to it your own special customizations.