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