Custom CSS for Wells Template Squarespace

Some Custom CSS you will need when using Wells Template Squarespace!

Notes

  • Adding Custom CSS to Home > Design > Custom CSS
  • With One page. Add code to Page Settings > Advanced > Header
  • Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
  • Send me a message if you have any questions/the code doesn’t work (free).
  • You can send a donation if this is helpful for you 😉

Header

Change link color on the menu bar?

/* Desktop */
#topNav a {
    color: green !important;
}
/* Tablet - Phone */
#mobileNav a {
    color: green !important;
}

Fixed Header on Mobile?

@media screen and (max-width:767px) {
#headerWrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: gray;
}
div#pageWrapper {
    margin-top: 90px !important;
}
}

Strikethrough Menu Hover

div#topNav a:hover {
    text-decoration: line-through;
}

Change active link color in Site Navigation

This CSS will change color for active link!

.main-nav a:active {
    color: green;
}

Indent Navigation items

#topNav {
    margin-left: 20px;
}

Change the “Menu” text for Mobile navigation menu?

#mobileMenuLink .active-link a {
    visibility: hidden;
}
#mobileMenuLink .active-link a:after {
    visibility: visible;
    display: inline-block;
    content: "Your Text";
}

Change “Menu” to Hamburger Icon

#mobileMenuLink a:after {
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxOHYxaC0yNHYtMWgyNHptMC02djFoLTI0di0xaDI0em0wLTZ2MWgtMjR2LTFoMjR6IiBmaWxsPSIjMTA0MGUyIi8+PHBhdGggZD0iTTI0IDE5aC0yNHYtMWgyNHYxem0wLTZoLTI0di0xaDI0djF6bTAtNmgtMjR2LTFoMjR2MXoiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
}
#mobileMenuLink a {
    visibility: hidden;
}

 

Add a horizontal line between the main and secondary nagivation

nav#mainNavigation {
    border-bottom: 2px solid #ddd;
    padding-bottom: 20px;
}

Changing mobile menu background colour and font colour

@media only screen and (max-width: 800px) {
#mobileNav {
    background: green;
}
#mobileNav ul li a {
    color: white;
}
#mobileNav ul li a:hover {
    color: gray;
}
}

Change the size and colour of the menu element in mobile-view

div#mobileNav a {
    color: green !important;
    font-size: 20px !important;
}

Collapse navigation folders in the mobile menu

Describe: the template displays all navigation folders as expanded in the mobile menu, so you see all sub pages. I want people to be able to click on a folder to expand it, otherwise the mobile menu is way too busy

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.mobile-folder > ul { display: none; }
</style>
<script>
$(document).ready(function() {
	$(document).on("click", ".mobile-folder > a", function(e) {
      e.preventDefault();
      $(this).next("ul").slideToggle()    
      return false;
  })
});
</script>

 

Hide the Wells mobile navigation altogether

nav#mobileMenuLink {
    display: none !important;
}

Home Page

Changing the background color on the homepage

.homepage {
    background: green;
}

Remove white space between thumbnails

.collection-type-gallery.enable-gallery-thumbnails.thumbnail-view #thumbnails {
    column-count: 2;
    column-gap: 0;
}
.sqs-gallery-design-autocolumns-slide {
    position: initial;
    width: auto !important;
}

Remove the logo from just the Home page

.homepage #logo {
     display: none;
 }

Gallery (Single Page)

Change hover color of Gallery Controls (Prev/Next)

div#simpleControls span:hover {
    color: #888 !important;
}

Change the color of my “Show Thumbnails” link in the gallery controls

#galleryWrapper .thumbnail-toggle {
    color: red;
}

Change the pagination text on Gallery Page?

span.control.prev-slide, span.control.next-slide {
    visibility: hidden;
}
span.control.prev-slide:after {
    content: "Text 1";
    visibility: visible;
}
span.control.next-slide:before {
    content: "Text 2";
    visibility: visible;
}

Change Prev/Next

span.control.prev-slide {
    visibility: hidden;
}
span.control.prev-slide:after {
    visibility: visible;
    content: "back";
}
span.control.next-slide {
    visibility: hidden;
}
span.control.next-slide:before {
    visibility: visible;
    content: "new next";
}

Blog Posts

Hide the publish date on blog posts

.view-item .published {
    display: none;
}

Change the pagination text on Blog Posts?

.pagination a:first-child, .pagination a:last-child {
    visibility: hidden;
}
.pagination a:first-child:after {
    content: "Text 1";
    visibility: visible;
}
.pagination a:last-child:before {
    content: "Text 2";
    visibility: visible;
}

Remove Sidebar

.view-item #sidebarWrapper {
    display: none !important;
}

Removing white space where Sidebar is hidden

.collection-type-blog.blog-sidebar-right .main-content {
    margin-right: 0;
}
#canvas {
    padding-right: 0;
}

Blog post background color

body#item-56ddc54e7da24f2904618b20 #page {
    background-color: violet;
}

Other

Add underline to all links across whole site

/* Add underline to all links */
a {
    text-decoration: underline;
}
/* Add underlink to all links, except Header Link */
header#header a {
    text-decoration: none;
}

Featured Image: Squarespace.com

10 thoughts on “Custom CSS for Wells Template Squarespace”

  1. Hello,
    I haven’t been able to get the code to change ‘menu’ to a hamburger icon to work. I’v tried it several times… the area where the icon would be is blank/bg color. Please LMK how to make it work.

    Thank you!

    Re:

    div#mobileMenuLink a:before {
    content: “”;
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
    visibility: visible;
    }
    #mobileMenuLink a {
    visibility: hidden;
    }

    Reply
  2. Thank you so much for these!

    I’m still having trouble changing the mobile font color, despite a copy/paste of the code given. I can’t figure out what I’m doing wrong. The background and hover changes worked…

    Thanks again!

    Reply
  3. Hi, thanks for this! The fixed header on mobile is great. But when clicking on the menu, the navigation only appears at the very top of the scroll. Is there a way to have it appear wherever you are on the page? thank you!

    Reply
  4. Thanks so much for this resource: it helps a total beginner like me to tweak my website!

    I do have a question though: I’d like to change the font on both the primary and secondary navigation of my website (uses Squarespace Wells template) on mobile to a custom font called Roquefort-Standard. I’ve managed to do it for desktop, but when I view on my laptop and mobile, it doesn’t work.

    Thanks so much in advance!!!

    Reply

Leave a Comment