Add an image to the first line of a dropdown menu

  • Resolved QuincyRossieau

    (@quincyrossieau)


    11 years, 7 months ago

    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)
  • zex2911

    (@zex2911)

    11 years, 7 months ago

    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.

    Thread Starter QuincyRossieau

    (@quincyrossieau)

    11 years, 7 months ago

    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.

    zex2911

    (@zex2911)

    11 years, 7 months ago

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

    Thread Starter QuincyRossieau

    (@quincyrossieau)

    11 years, 7 months ago

    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.