Ubermenu background image mobile

[bakrona]

hi there

I use ubermenu background images for submenus. On desktop it looks fine but on mobile not. How is it possible to hide the background images on mobile?

[ruenel]

Hello @bakrona,

Thanks for writing in! I can see that you have used a custom CSS to display the background image. You will need to update your code and use @media CSS block so that you background image will only be displayed on bigger screen sizes. For example:

@media(min-width: 1250px){
  .ubermenu .ubermenu-submenu.ubermenu-submenu-id-15246 {
    background-image: url(//bakrona.ch/wp-content/uploads/2021/01/ApexZ-Menu.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: auto;
  }
}

Hope this helps.

[bakrona]

Hi there

Thanks for the code. I inserted the code but unfortunately the background image is still there in mobile (also after clearing cache)

I have just recently added ubermenu and I am not aware that i used any custom CSS to display the backgroung image. Display of a background image is an option in ubermenu.

[christian]

Hey @bakrona,

We’re sorry for the wrong suggestion. That code is generated by UberMenu based on its Submenu option.

There is no option to remove the image on mobile only. What you can do is use the generated CSS by UberMenu as a guide to extending UberMenu styles so as to remove the background using custom CSS, the code to add in Theme Options > CSS would look like the following code.

@media(max-width: 1024px){
  .ubermenu .ubermenu-submenu.ubermenu-submenu-id-15246 {
    background-image: none;
  }
}

Pleases note that custom development is outside the scope of our theme support. If you need more customizations, please consult with a developer.

Hope that helps and thank you for understanding.