Superfly custom background for submenus

[Multiplier]

Hi All. I have a staging site: www.california.church and I’m wondering how to apply background images to the submenu?

1. For example, if you click the superfly hamburger icon, and hover over Visit, there is a second level page titled Service Times. I’d like to have this image display in the background: http://california.church/wp-content/uploads/2017/07/Screen-Shot-2017-07-04-at-10.17.37-AM.png

2. In addition, I’ve tried some CSS that targets the other “true” submenus such as About, Ministries, Media. However, it looks like it displays the background image on all of them. Is there a way to target individual ones so that I can have a unique image for each one?

Thanks in advance

[lely]

Hi There,

Please try this custom CSS:
.superfly-on #sfm-sidebar .sfm-view-level-custom { /*Other submenu*/ background-image: url(http://california.church/wp-content/uploads/2017/07/Screen-Shot-2017-07-04-at-10.17.37-AM.png); background-repeat: no-repeat; } #sfm-sidebar .sfm-view-level-1.sfm-current-63 { /*About Submenu*/ background: green !important; } #sfm-sidebar .sfm-view-level-1.sfm-current-64 { /*Ministry Submenu*/ background-color: aliceblue; } #sfm-sidebar .sfm-view-level-1.sfm-current-65 { /*Media Submenu*/ background-color: aliceblue; }
Unfortunately, on other submenu wherein there’s just text, there’s no unique identifier and it will be the same for all of those.

[Multiplier]

Hey Lely,

Thank you so much for your advice. I have 2 follow up questions, however:

1. I just applied the code for the custom text background image and it looks very stretched. The image I have selected for it does not match the box size 100% perfectly but it shouldn’t be stretched. Any advice on why this might be and how to fix it?

2. As for making sure the background image is different for custom text areas like Visit and Giving, what do you think about wrapping the whole contents of it in tags? I just tried wrapping it in and added it such that:

.superfly-menu-visit-background.superfly-on #sfm-sidebar .sfm-view-level-custom { /Other submenu/
background-image: url(http://california.church/wp-content/uploads/2017/07/Screen-Shot-2017-07-04-at-10.17.37-AM.png);
background-repeat: no-repeat;
}

but it didn’t work

[lely]

Hello There,

1.) Please update that first part to this:

  .superfly-on #sfm-sidebar .sfm-view-level-custom {
       background-image: url(http://california.church/wp-content/uploads/2017/07/Screen-Shot-2017-07-04-at-10.17.37-AM.png);
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
   } 

Result will be this: https://screencast-o-matic.com/watch/cbi1h6lofE

2.) The wrapper is inside the container and not cover the entire blocks. See this too: https://screencast-o-matic.com/watch/cbi1h2lofL
Now try this to see it how it works with that wrapper
span.superfly-menu-visit-background { background-image: url(http://california.church/wp-content/uploads/2017/07/Screen-Shot-2017-07-04-at-10.17.37-AM.png); background-position: center; background-repeat: no-repeat; background-size: cover; display: block; }

Hope this helps.