Jump to content

Add blurry background to my dropdown menu

Go to solution Solved by Spark-Plugin,

Recommended Posts

  • Replies 2
  • Views 232
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted

Hello @LucieGbt1993. You can achieve this by using the following code. Adjust the pixel value (px) to match your header background as needed:

  1. Navigate to Pages > Website Tools > Custom CSS.
  2. Paste the code into the CSS editor.
  3. Hit Save and you’re done
.header-nav-folder-content {
  background: transparent !important; /* Sets the background to transparent */
  -webkit-backdrop-filter: blur(4px); /* Applies a blur effect for Safari browsers */
  backdrop-filter: blur(4px); /* Applies the blur effect for other modern browsers */
}

Give it a try:)

- Answered by Iuno from sparkplugin.com

forumsignature-recommendedcopy2.png.0579645eb1430dc7c1059541dc6456c6.png

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.