Support » Themes and Templates » Add an image to the first line of a dropdown menu

  • Resolved QuincyRossieau

    (@quincyrossieau)


    Hello all,

    I have the following question:
    I have styled my drop down menu the way i want it, everything works. But I want the first line of any child menu (which drops down) to automaticly place an image.

    I know i can place i custom menu item in the WordPress menu, and then style the css accordingly, but i want my client to add and modify the content of the menu theirselves, therefor it should be coded in that the images is displayed no matter what.

    Any ideas on how to do this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • If it’s the same image for every first line of a child menu you can do

    .sub-menu li:first-child {
    background-image: url(images/photo.png);
    background-repeat:no-repeat;
    }

    or something similar.

    Thanks man, that almost does what i need.

    It places the images on the first child, but what i need is the image to appear before the first child.

    I tried

    .sub-menu li:first-child {
    background: url(images/logo.png) no-repeat top left;
    height: 80px;
    line-height: 80px;
    }

    While this does create a gap between the first and second child, it does not place the text of the first child below the image.

    Do it without height and line-height. Instead, add padding-top:15px (or 65px, depending on height of your image). Hope that helps. 🙂

    That’s it! Thanks a million!

    .sub-menu li:first-child {
    background: url(images/logo.png) no-repeat top left;
    padding-top: 50px;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add an image to the first line of a dropdown menu’ is closed to new replies.