Menubar and CSS Menu Builder
![[CSSmb menu template]](/images/menuCSSmb3.jpg "CSSmb menu template")
[Updated for the CSSmb_46 template]
CSS Menu Builder is an amazing website that offers a free online tool to build your CSS menus.
You can choose among a number of different backgrounds and menu images, and you can select colors and gradients for the inactive, hover and active status of your menu items.
With this information the online tool generates a stylesheet and a single .png image, packs both files in a convenient .zip archive and lets you quickly download it.
Interesting, isn’t it? And now you can apply a CSS Menu Builder style to Menubar, using the CSSmb_46 Menubar template. Let’s see how to do it.
Step 1: If you haven’t already, install Menubar, then install the CSSmb_46 Menubar template (you can find Menubar in the WordPress Plugin Directory and Menubar templates on the Download page; see the WP Menubar documentation for detailed instructions);
Step 2: Go to CSS Menu Builder and build your horizontal menu style online (you can skip the add links step); then download the resulting zip archive cssmenubuilder.zip and unpack it;
Step 3: The unpacked archive contains your custom made image topMenuImages.png (in the images subfolder) and the stylesheet stylesheet.css (in the css subfolder); rename topMenuImages.png to yourname.png and rename stylesheet.css to yourname.css;
Step 4: Open yourname.css with a plain text editor and:
- replace each occurrence of the string .menu with the string .yourname (there are ten occurrences to replace);
- replace each occurrence of the string ../images/topMenuImages.png with the string yourname.png (there are five occurrences to replace);
Step 5: Upload the image yourname.png and the stylesheet yourname.css to wp-content/plugins/menubar-templates/CSSmb_46 in your WordPress installation; then go to the Appearance – Menubar administration panel, select Edit Menu, and apply the template CSSmb_46 with yourname.css to your menu (see the WP Menubar documentation for detailed instructions).
Done! Now the menu built with Menubar and styled with CSS Menu Builder is live on your site.
If you wish to try a different style, you can repeat the above procedure, using a different name (e.g. you could use anothername instead of yourname).
You can upload as many stylesheets and images as you like to wp-content/plugins/menubar-templates/CSSmb_46, and you can switch between them with just a few clicks in the Appearance – Menubar, Edit Menu administration panel.
Note: the CSSmb_46 template allows you to adopt the CSS Menu Builder styles, which currently do not support submenus. So, if you have any submenus, they won’t be displayed.
Happy menus with WordPress Menubar, and special thanks to CSS Menu Builder!
Will this work with vertical menus in a sidebar widget as well?
Hi Matt,
I didn’t try that, but you just gave me a good idea! I’ll let you know.
Thanks Andrea. I am in a bind and need to get a good vertical sidebar menu going in a hurry
Let me know if you come up with something good.
Ideally, I would like to use the wp_list_pages tag in concert with this so I don’t have to manually add each page.
So, I tried to do it with vert menus in CSS Menu Builder, followed these instructions and put it in the sidebar widget, but no luck.
Hi Matt,
I had a look at the vertical menu, and it’s less simple than I originally thought. So I have to postpone that feature, for my lack of free time – Sorry!