Jump to content

Accordion block - how to customize color & change bullet stylet?

Recommended Posts

Posted (edited)

I'm looking to customize my drop-down menu. In the accordion menu, when I choose a bullet point, it has a different style than the bullet points on the rest of the site, and want to change it so it's just a basic bullet point. Currently it's a empty circle.  The "bullet points" that are in the drop down accordion now, I right clicked and chose "emoji and symbols" to have it be consistent.

Also, so that it is consistent with the rest of the page, I want to change the bullet points to a different color.  Any help would be appreciated.  

Edited by laurafiks
Posted

@laurafiks Hi! First enable the bullet points inside your accordion menu. Then add this code under Website > Pages > Website Tools > Custom CSS

.accordion-item__description ul {
    list-style: none;
    padding-left: 0;
}

.accordion-item__description ul li {
    position: relative;
    padding-left: 17px;
}

.accordion-item__description ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
    color: #ff7867;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.