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: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; }
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; }
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
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;
}
The code is incorrect. I updated new code. https://beaverhero.com/wells-squarespace/#Change_%E2%80%9CMenu%E2%80%9D_to_Hamburger_Icon
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!
Can you share site url? I can check easier.
Send url via this form: https://beaverhero.com/covid19