Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 3, 2020 at 4:53 pm #1189774
    navindesigns

    HI,

    My client wants to add a transparent image over the menu item only on the current/selected page they user is viewing

    screenshot – https://ibb.co/XptMBP7

    is that possible? or do I need to make the menu all image based?

    March 3, 2020 at 5:38 pm #1189789
    Jordan Shannon

    Hey navindesigns,

    Yes this is possible. Have you already upload the image to the media library?

    Best regards,
    Jordan Shannon

    March 3, 2020 at 5:51 pm #1189793
    navindesigns

    No, I have not

    do you want me to upload the transparent png image? Will you layer the transparent png over the enfold text menu?

    March 3, 2020 at 6:03 pm #1189795
    Jordan Shannon

    Hi,

    You have to put it into the media library. We can put it in as a background image.

    Best regards,
    Jordan Shannon

    March 10, 2020 at 5:02 pm #1191919
    navindesigns

    Here is the png image
    https://theavantnyc.com/wp-content/uploads/2020/03/brushstroke.png

    Thanks again

    March 11, 2020 at 12:26 am #1192074
    Jordan Shannon

    Hi,

    This is what I needed. One last thing, just the link to the site and admin info so we can log in and workout the css. The link above only took me to a register page.

    Best regards,
    Jordan Shannon

    March 11, 2020 at 12:54 am #1192079
    navindesigns

    here you go

    you can see the menu on this page

    Interiors

    • This reply was modified 4 years, 8 months ago by navindesigns.
    March 11, 2020 at 5:25 am #1192132
    Jordan Shannon

    Hi,

    Thanks. Please add this to quick css:

    .menu-item a:hover{
    background: url(https://theavantnyc.com/wp-content/uploads/2020/03/brushstroke.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position:8px 12px
}


.menu-item.current-menu-item a{
    background: url(https://theavantnyc.com/wp-content/uploads/2020/03/brushstroke.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position:8px 12px
}

    Best regards,
    Jordan Shannon

    March 11, 2020 at 5:32 am #1192133
    navindesigns

    Looks great!!
    I just want to move the png to left a few pixels.

    March 12, 2020 at 3:01 am #1192460
    Rikard

    Hi,

    Please try to adjust the value which is 8px in Jordans code, for example:

    .menu-item a:hover{
    background: url(https://theavantnyc.com/wp-content/uploads/2020/03/brushstroke.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position:2px 12px;
}


.menu-item.current-menu-item a{
    background: url(https://theavantnyc.com/wp-content/uploads/2020/03/brushstroke.png);
    background-size: contain;
    background-repeat:no-repeat;
    background-position:2px 12px;
}

    Best regards,
    Rikard

    April 18, 2020 at 5:02 pm #1205017
    navindesigns

    Works great

    Thanks

    April 18, 2020 at 5:04 pm #1205021
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Image over menu items’ is closed to new replies.