Some Custom CSS you will need when using Wells Template Squarespace!
In this post
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
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
Hello! I have a Question I can`t see the Navigation on my Well`s Mobile site as it is on the far left on the Website – how can I change that?
I don’t see burger/menu text here. Did you disable it?
You can send your questions to my email, I will check carefully.
https://beaverhero.com/covid19
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!
Hi. Can you share site url? I can help easier
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!!!
Hi. You declared Roquefort-Standard font in font-face,
@font-face {
font-family: ‘Roquefort-Standard’;
src: url(https://static1.squarespace.com/static/584f4ff259cc68d6296bff9b/t/61a31b22293c2e0419a4a78e/1638079266776/Roquefort-Standard.otf)
}
however in the code, you used Roquefort-Mild
div#topNav a {
font-family: ‘Roquefort-Mild’ !important;
}
So the font code works on your desktop only, it won’t work on someone else desktop/mobile.
font-family in both need the same.
change to this code
Ah yes, I can see where I made a mistake! All works well now. Really appreciate the help!