Custom CSS for Foster Template Squarespace

Some Custom CSS you will need when using Foster Template Squarespace!

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  or Facebook with your site url. I’ll give you exact CSS..

4. If you want to apply CSS for only Desktop, Tablet, Phone. Please use

/* Desktop */
@media screen and (min-width:992px) {
write your css here
}
/* Tablet */
@media screen and (min-width:768px) and (max-width:991px) {
write your css here
}
/* Phone */
@media screen and (max-width:767px) {
write your css here
}

Header

Hide Cart Icon

.tweak-header-cart-style-cart .Header .Cart {
    display: none;
}

Hide Site Title

.Header-branding {
    display: none;
}

Removing Navigation & Header in One Page

First, you need to find Page ID.

Then, use

/* Remove header */
body#collection-57daf0ad579fb3865d077492 header.Header {
    display: none;
}
/* Or remove only Site Title */
body#collection-57daf0ad579fb3865d077492 .Header-branding {
    display: none;
}
/* or remove only Navigation */
body#collection-57daf0ad579fb3865d077492 .Header-nav {
    display: none;
}

Each page will have different body#collection-57daf0ad579fb3865d077492

Change Navigation Style

/* Navigation Items */
.Header-nav a {
    color: red !important;
    font-size: 20px;
    font-weight: bold;
    font-family: Roboto, sans-serif;
}
/* Navigation spacing */
.Header-nav {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 50px;
    margin-right: 70px;
}

Change Background Header

/* Header background color */
header.Header {
    background-color: green;
}
/* Header background image */
header.Header {
    background-image: url(https://static1.squarespace.com/static/5794fb3…/t/57fe776…/1476294516298/?format=750w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% 20%;
}

Fixed Header on Top

header.Header {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

Change the pagination text on the Foster template from “Older/Newer” to “Next/Back”

Make active page unclickable in main navigation

a.Header-nav-item.Header-nav-item--active {
    pointer-events: none;
}

Change Link Address of Site Title

Add to Page Settings > Advanced > Header Injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 <script>$(document).ready(function () {
           $(".Header-branding a[href]").attr("href", "http://www.google.com/");
         });
 </script>

Underline active navigation item

a.Header-nav-item.Header-nav-item--active {
    text-decoration: underline;
}

Add “Menu” text to Hamburger Icon

.Mobile-bar-menu:before {
    content: "Menu";
    display: block;
    margin-bottom: 10px;
    color: red;
    font-size: 18px;
}

[data-nc-container="top-center"] {
    flex-direction: column-reverse !important;
}

Decrease padding top/bottom Navigation

.Header-nav {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Decrease Header Padding Top/bottom

.Header-inner {
    padding-top: 0;
    padding-bottom: 0;
}

Footer

Nav link color in footer

.Footer-nav a {
    color: green;
}
.Footer-nav a:hover {
    color: #f00;
}

Change Footer background color & Image

footer.Footer {
    background-color: red;
}

footer.Footer {
    background-image: url(https://static1.squarespace.com/static/5794fb3…/t/57fe776…/1476294516298/?format=750w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% 20%;
}

Hide footer specific page

First, you need to find Page ID.

Then, use

body#collection-57daf0ad579fb3865d077492 footer.Footer {display:none;}

Each page will have different body#collection-57daf0ad579fb3865d077492

Share this post:

If you have any questions, just fill in form below

Each FREE/PAID option will have different priorities.
If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Posted in