Web Creation on Squarespace: Moorheart Site Transfer | Part 8

This time we delve into the world of custom CSS to add a dash of style to the Squarespace accordion elements and streamline navigation on the page with smooth scrolling anchor links. These enhancements not only boost the aesthetic appeal of your site but also improve user experience.

Custom Styling for Squarespace Accordions

Accordions are great for organizing content, but custom styling can take them to the next level. Here’s the CSS we used to transform standard accordions into visually appealing elements:

// Customizing Accordion Background and Shadow
.accordion-item {
  background: #F9E27D;
  margin-bottom: 20px !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
}

// Alternating Accordion Colors
.accordion-item:nth-of-type(3n+ 2) {
  background: #F4679B;
}

.accordion-item:nth-of-type(3n+ 3) {
  background: #7AA57C;
}

// Styling Accordion Titles and Arrows
.accordion-item__click-target {
  padding: 20px !important;
}

.accordion-item .arrow {
  opacity: 0.6;
  border-color: white;
}

.accordion-item:nth-of-type(3n+ 2)
.accordion-item__title, 
.accordion-item:nth-of-type(3n+ 3) .accordion-item__title {
  color: white;
}

// Accordion Button Styling
section[data-section-id="653e8b426eba014bc2b78081"] .accordion-item__dropdown a {
  box-shadow: 4px 4px 4px #F4679B;
  background-color: white;
  padding: 6px 16px;
  color: #545454 !important;
  transition: box-shadow 0.45s;
}

section[data-section-id="653e8b426eba014bc2b78081"] .accordion-item__dropdown a:hover {
  box-shadow: 2px 2px 2px #F4679B;
}

---

This CSS adds alternating background colours, so it doesnt matter how many items you have in your accordion the colour scheme will keep alternating. Also adjust the style of the arrow icon to give it some more personality

Smooth Scrolling with Anchor Links

To enhance navigation, we implemented smooth scrolling for anchor links. This feature provides a seamless user experience, especially on pages with long content:

// Smooth Scrolling
html {
  scroll-behavior: smooth;
}

This simple line of code ensures a smooth transition when users click on anchor links, navigating them gracefully to different sections of the page.

Check out our video for a detailed guide on implementing these styles: