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