Docs

[Tristan A]

Hi there!

Trying to do something that is either going to be awesome…. or absolutely ridiculous 🙂

I added flip cards to an ubermenu. Now, i am using CSS to add background images to those cards. Unfortunately, the code isn’t working? I have tried adding the CSS via the customizer, as well as via the Ubermenu CSS section.

/* menu flip cards*/
 .shopmenucard1 .x-face-outer.front {
background: url('//domain.com/your-image-for-front.jpg') cover no-repeat;
}
.shopmenucard1 .x-face-outer.back {
background: url('//domain.com/your-image-for-back.jpg') cover no-repeat;
}

Please note that i have changed the url’s for the real ones, i just don’t want to share my site url on this forum, which is why i kept the anonymous ones for the purpose of the thread.

[Tristan A]

This reply has been marked as private.

[Rupok]

Hi there,

Your CSS is incorrect and that’s why it’s not working. Let’s try like this :

.shopmenucard1 .x-face-outer.front {
	background: url("//domain.com/your-image-for-front.jpg") no-repeat center center / cover;
}

Hope this helps.

Cheers!

[Tristan A]

Thanks!!

[Rupok]

You are welcome!

Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Cheers!

[Tristan A]

Thanks,

In the menu (see URL from my earlier private post) there is still a bit of white space underneath the flip cards (see screenshot here also https://www.dropbox.com/s/xbjd29mhet3jmz7/white%20space%20in%20ubermenu.png?dl=0)

I can’t find any Ubermenu padding or height settings that fix this? Should I address it via CSS? And how?

Thanks again!

[Rupok]

Hey there,

Thanks for updating. It’s happening because card items has some default margin bottom value. Let’s add this as well to eliminate this :

.x-card-outer.shopmenucard {
	margin-bottom: 0;
}

Cheers!

[Tristan A]

thanks!

[Thai]

You’re most welcome 🙂

[Author]

Posts