darken screen behind live search modal

williammay4324 · September 2023

how can I add a dark background behind the live seach modal to draw the users focus to the input/search box?

Phil · September 2023

Hi,

Try the following CSS code:

.search-overlay-opened #Wrapper:before{
   content: "";
   display: block;
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: rgba(0,0,0,.7);
   z-index: 1;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

If this does not work, I will need a link to your website.

Best regards

williammay4324 · September 2023

This does not work. #Wrapper element contains the .mfn-search-active class. Furthermore :has() is not supported yet in FF.

My website is via a modified host file.

173.236.29.82 www.newyorkmyc.org

173.236.29.82 newyorkmyc.org

Phil · September 2023

I can see that you use the Header Builder, with which my CSS will not work, unfortunately.

Please add this feature to a topic with suggestions, and we will consider adding this in future updates.

https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest

Thanks

darken screen behind live search modal

Comments