WordPress.org

Forums

[resolved] Add an image to the first line of a dropdown menu (5 posts)

  1. QuincyRossieau
    Member
    Posted 3 years 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?

  2. zex2911
    Member
    Posted 3 years 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.

  3. QuincyRossieau
    Member
    Posted 3 years 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.

  4. zex2911
    Member
    Posted 3 years ago #

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

  5. QuincyRossieau
    Member
    Posted 3 years ago #

    That's it! Thanks a million!

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.