Skip to main content

WordPress Navigation- Dropdown Menu Image

Having updated my theme to make use of the WordPress navigation menus I decided I wanted to have an indicator to display that there is a drop-down menu. This can be done many ways with plugins etc but I wanted to do it without the need for a plugin. So I had a think and came up with this idea which requires very little knowledge to carry out.

Create a Image for your drop-down navigation

To start this tutorial off we need a image. The source files are available to download at the bottom of this post. I used Inkscape which I used for this particular project but you can use any other software. I first created a triangle and then I scaled it down to 15px by 8px. I placed the triangle hard to the left and left some space to the right. This stops the image from being pushed to the edge of the container which improves it’s appearance and prevents us from adding any padding to our CSS which may destroy the look.

Enable Hidden Options

Go to the WordPress admin and click on Appearance and then click on the Menus.

Hidden Options

Go to Screen Options and check the CSS Classes checkbox.

CSS Classes Option

Back in the menu section in my case I have Tutorials as a parent and the children are Windows, PHP and Linux.

Navigation Menu Options

Expand tutorials by clicking on it and type drop-down into the CSS classes input box. Save your menu!

Expand Tutorials Category

Add the CSS

We of course now need add a few lines to your stylesheet. Open style.css in your favourite editor and enter the following

li.drop-down a
{
	background:url(images/down_arrow_8.png) no-repeat center right;
}

If you refresh your browser you may see that multiple images are being displayed like so.

Drop Down Menu

To prevent this we add the following to the stylesheet.

#menu-navbar .sub-menu .menu-item a  , #menu-navbar .sub-menu .menu-item a:visited 
{
    background-image: none;
}

Conclusion

Completed Drop Down Menu

As you can see with the above image the extra images have disappeared. Hope you have enjoyed this simple tutorial and please feel free to contact me if you are experiencing any problems as not all navigation menus are the same so there may be a little tweaking required.

Download

Download WordPress Navigation Image
Topics:

11 replies on “WordPress Navigation- Dropdown Menu Image”

  • Hi, i am building a site and want the drop down menus to show images only. I have managed to achieve this with the main navigation menu, but am struggling to achieve it with the drop down menus. i used the following code to add the images to the main nav:
    #menu-item-308 a {

    display:block;

    height:65px;

    width:65px;

    padding:0px;

    margin-left:6px;

    outline:none;

    text-indent:-9999px;

    no-repeat;

    background-image:url(‘Image-url’); background-position:0 0;

    }

    .custom #menu-item-308 a:hover { background-position:0 -24px; }

  • So you want to build a WP based website like the WIX template?

  • Hi… Thanks for this information, But i need a image merge with all the three sub-menus (For an eg: if we hover a menu in a dropdown leftside image and right side menus)

  • Hi there! Great tip, but I have the same problem, the non-expandable menu item stil has the arrow, which is your another solution that you can share with me/us?

    Thanks in advance!
    Greetings from Chile.
    Giovanni

  • This is great! I have a couple small issues though… I’m using PressWork as the theme, and I suspect it deals with drop downs a lil differently. Even if not, all my sub menus are still showing up with the arrow. And they seem to “animate” when rolled over and rolled out.

    Any suggestions?

    • I solved the “non-expandable” menus showing arrows problem. Perhaps not the most time consuming way, as I created a new class “no-drop-down” and that works. However, the arrows still seem to come and go on hovering, and I’ve tried forcing them to show up but I’m not really sure what I’m doing. 😛

    • The first issue with the icon disappearing on hover is because there is a line in the CSS that prevents the icon from showing. I will email you the solution for easier reading.

  • Thank you!!!

Comments are closed.