How do I add an image to my mobile menu?

Home / Forums / Ascend Theme / How do I add an image to my mobile menu?

This topic is: Not Resolved
[Not Resolved]
Posted in: Ascend Theme
August 10, 2022 at 8:37 pm

I’m looking to add an image to my mobile menu via CSS.
I have accomplished this task with the following CSS using a child theme…

.div-class-name {
background-image: url('
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 25px 50px 25px 50px;
margin-bottom: 25px;
}

What happens next is when accessing the mobile menu, there is a separator line through the logo. The CSS class that programs the separator (border) is .kad-mobile-nav li a. I tried z-index to place the border behind the image and it will not work. I’m using a JPG, therefore there is no transparent issue.

I tried adding the following and it did not work…

.div-class-name .kad-mobile-nav li a {
visibility: hidden;
}

Note: On the WP-Admin side, in the menus area, I created a “Custom Link” for the image to display. The custom link has a CSS Classes field set to .div-class-name.

What should I do?

  • You must be logged in to reply to this topic.