Free answer for users impacted by COVID-19. Send your questions now ->

Custom CSS for Montauk Template Squarespace

Montauk Template: Encourage visitors to explore your work with this website template’s versatile portfolio page and product navigation.

Notes

  • Adding Custom CSS to Home > Design > Custom CSS
  • Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
  • With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
  • 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

Disable Logo Link

Entire Site

.logo a {
    pointer-events: none;
}

One Page

<style>
.logo a {
    pointer-events: none;
}
</style>

Invert Logo Color (One Page)

Add to Page Header

.logo-image .logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Remove Logo

Entire Site

.logo a {
    display: none !important;
}

One Page

<style>
.logo a {
    display: none !important;
}
</style>

Navigation Hover Color

.main-nav li a:hover {
    color: #ff0000 !important;
}

Remove Navigation Underline when Hovering

.main-nav li a:hover {
    border-bottom: none !important;
}

Hide Navigation Items

Replace 1 with 2, 3, 4, 5….

Entire Site

.main-nav li:nth-child(1) {
    display: none !important;
}

One Page

<style>
.main-nav li:nth-child(1) {
    display: none !important;
}
</style>

Turn Navigation Last item to Button

Entire Site

.main-nav li:last-child {
    background: #f1f2f3;
    padding: 5px 10px;
    border-radius: 10px;
}

One Page

<style>
.main-nav li:last-child {
    background: #f1f2f3;
    padding: 5px 10px;
    border-radius: 10px;
}
</style>

Navigation Background Color

Entire Site

.main-nav ul {
    background: #000 !important;
}

One Page

<style>
.main-nav ul {
    background: #000 !important;
}
</style>

Mobile Menu dropdown to expand below “Menu”

/* move menu to top */
div#mobileMenuLink a {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
}
/* Fix overlap content */
div#mobileNav.menu-open {
    margin-top: 30px;
}
/* remove bottom old position */
div#mobileMenuLink {
    border-bottom: none;
}
/* replace border bottom to border top */
#mobileNav .wrapper {
    border-bottom: none;
    border-top: 2px solid rgba(0,0,0,0.1);
}

Rename “Menu” on Mobile

div#mobileMenuLink a {
    visibility: hidden;
}
div#mobileMenuLink a:after {
    content: "New Menu";
    visibility: visible;
    position: absolute;
    left: 0;
    right: 0;
    color: #ff0000;
    font-size: 30px;
}

Adding Custom Icon to Menu (Mobile)

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;
}

Change mobile menu from text “MENU” to Hamburger icon

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;
}

Navigation Font Size on only Mobile

div#mobileMenuLink a {
    font-size: 30px !important;
}
div#mobileNav ul li a {
    font-size: 20px !important;
}

 

Change Border Color on Mobile Navigation

div#mobileMenuLink {
    border-bottom-color: #ff0000;
}

Bold Navigation Text (Mobile)

div#mobileNav.menu-open ul li a {
    font-weight: bold !important;
}

Sticky Navigation on Mobile

div#mobileNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
div#mobileMenuLink {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 999;
}
header#header {
    margin-top: 50px;
}

Mobile Menu Background Color

Entire Site

div#mobileMenuLink {
    background: #000;
}

One Page

<style>
div#mobileMenuLink {
    background: #000;
}
</style>

Remove Navigation

Entire Site

/* Mobile */
div#mobileMenuLink {
    display: none;
}
/* Desktop */
.main-nav {
    display: none !important;
}

One Page

<style>
/* Mobile */
div#mobileMenuLink {
    display: none;
}
/* Desktop */
.main-nav {
    display: none !important;
}
</style>

Header Background Color

Entire Site

header#header {
    background: #000;
}

One Page

<style>
header#header {
    background: #000;
}
</style>

Full-width Header

@media screen and (min-width:641px) {
div#canvas {
    position: relative;
}
header#header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vw;
}
section#page {
    margin-top: 15vw;
}
}

Remove Header

Entire Site

header#header {
    display: none;
}

One Page

<style>
header#header {
    display: none;
}
</style>

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #000;
}

One Page

<style>
footer#footer {
    background: #000;
}
</style>

Footer Background Image

Entire Site

footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

One Page

<style>
footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

Remove Footer

Entire Site

footer#footer {
    display: none !important;
}

One Page

<style>
footer#footer {
    display: none !important;
}
</style>

Full-width Footer

Full-width Main Content

div#canvas {
    position: relative;
}
footer#footer {
    background: #f1f2f3;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 5vw;
    padding-right: 5vw;
}
section#page {
    margin-bottom: 15vw;
}

If you want footer goes to the edge of the page with no white space around it, use

html {
    position: relative;
}
footer#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f1f2f3;
    padding-left: 5vw;
    padding-right: 5vw;
}
section#page {
    margin-bottom: 15vw;
}

Remove border above Footer

footer#footer {
    border-top: none;
}

Footer Social Icon Color

#footer .social-icons-color-black svg {
    background: #ff0000;
}
#footer .social-icons-color-black svg use {
    fill: #f1f2f3 !important;
}

Blog

Blog Post Background Image

All Posts

.view-item div#canvas {
    margin: 0 !important;
    max-width: 100%;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

One Post

<style>
div#canvas {
    margin: 0 !important;
    max-width: 100%;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

Remove Date

Blog Page

.view-list .dt-published {
    display: none;
}

All Posts

.view-item span.date {
    display: none;
}

Remove Share

Blog Page

.view-list .squarespace-social-buttons {
    display: none;
}

All Posts

.view-item .squarespace-social-buttons {
    display: none;
}

Align Left Post Title

Blog Page

.view-list h1.entry-title {
    text-align: left;
}

All Posts

.view-item h1.entry-title {
    text-align: left;
}

Align Left Post Date

Blog Page

.view-list .meta {
    text-align: left;
}

All Posts

.view-item .meta {
    text-align: left;
}

Change Share & Link Fonts

/* Share */
.ss-social-button {
    font-size: 20px;
    color: #ff0000;
    font-family: proxima-nova;
}
/* Like */
.sqs-simple-like * {
    color: #ff0000;
    font-size: 30px;
    font-family: proxima-nova;
}

Shop

Align Left Product Title/Price

.view-list .product-title {
    text-align: left !important;
}
.product-price {
    text-align: left !important;
}

Change Product Name/Price Font Size

Shop Page

.view-list .product-title {
    font-size: 20px !important;
}
.view-list .product-price {
    font-size: 30px !important;
}

All Products

.view-item h1.product-title {
    font-size: 11px;
}
.view-item span.sqs-money-native {
    font-size: 20px;
}

Remove Product Price

Shop Page

.view-list .product-price {
    display: none !important;
}

All Products

.view-item .product-price {
    display: none;
}

Change “$” currency

Shop Page

.view-list span.sqs-money-native:before {
    content: "AUD " !important;
}

All Products

.view-item span.sqs-money-native:before {
    content: "AUD " !important;
}

Change Price Color

.product-price {
    color: #ff0000;
}

Remove “Back to Shop”

div#productNav {
    display: none !important;
}

Rename Back to Shop

#productNav a:before {
    visibility: visible;
    content: "← New Text";
    color: #ff0000;
    font-size: 18px;
}
#productNav a {
    visibility: hidden;
}

Remove Product Share

.product-sharing {
    display: none !important;
}

Remove Add to Cart

All Products

.sqs-add-to-cart-button-wrapper {
    display: none;
}

One Product

<style>
.sqs-add-to-cart-button-wrapper {
    display: none;
}
</style>

Increase Product Detail Width

All Products

@media screen and (min-width:641px) {
#productDetails {
    width: 60%;
}
div#productGallery {
    width: 39%;
}
}

One Product

<style>
@media screen and (min-width:641px) {
#productDetails {
    width: 60%;
}
div#productGallery {
    width: 39%;
}
}
</style>

Move Add to Cart ABOVE the product description

div#productDetails {
    display: flex;
    flex-direction: column;
}
.sqs-add-to-cart-button-wrapper {
    order: 3;
}
.product-excerpt {
    order: 4;
}
.product-sharing {
    order: 5;
}

Translate “item” in basket

.absolute-cart-box .details .suffix {
    visibility: hidden;
}
.absolute-cart-box .details .suffix:before {
    content: "New item";
    visibility: visible;
}

Translate Cart Page

/* Translate SHOPPING CART TITLE */
h2.cart-title {
    visibility: hidden;
}
h2.cart-title:before {
    visibility: visible;
    content: "New Shopping Cart Title";
}
/* Translate ITEM */
.cart-item-list-labels>span span {
    visibility: hidden;
}
.cart-item-list-labels>span span:before {
    visibility: visible;
    content: "New Item";
}
/* Translate QTY */
.cart-item-list-labels div:nth-child(4) span span {
    visibility: hidden;
}
.cart-item-list-labels div:nth-child(4) span span:before {
    visibility: visible;
    content: "New QTY";
}
/* Translate Price */
.cart-item-list-labels div:last-child span span {
    visibility: hidden;
}
.cart-item-list-labels div:last-child span span:after {
    visibility: visible;
    content: "New Price";
}
/* Translate Sub Total */
.cart-container div:last-child span span {
    visibility: hidden;
}
.cart-container div:last-child span span:after {
    visibility: visible;
    content: "New Subtotal";
}
/* Translate Checkout Button */
.checkout-button span {
    visibility: hidden;
}
.checkout-button span:after {
    visibility: visible;
    content: "New Checkout Text";
    margin-left: -80px;
}

Product Detail Font on only Mobile

@media screen and (max-width:640px) {
/* Product Name */
.view-item h1.product-title {
    font-size: 11px;
}
/* Product Price */
.view-item .product-price {
    display: none;
}
/* Product Description */
.view-item .product-excerpt p {
    font-size: 20px;
}
}

Other

Remove Page Title

All Pages

h1.page-title {
    display: none;
}

One Page

<style>
h1.page-title {
    display: none;
}
</style>

Site Background Color

One Page

<style>
body {
    background: #000;
}
</style>

Entire Site

body {
    background: #000;
}

Make borders closer to screen edge

div#canvas {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
}

Featured Image: Squarespace.com

Share this post:

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder