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

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

Hide Cart Icon

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

Hide Site Title

.Header-branding {
    display: none;
}

Add Tagline under Header

/* Add tagline */
h1.logo.logo-text a:after {
    content: "Tagline";
    display: block;
    font-size: 1.5rem;
}

Removing Navigation & Header in One Page

<style>
/* Remove header */
header.Header {
    display: none;
}
/* Or remove only Site Title */
.Header-branding {
    display: none;
}
/* or remove only Navigation */
.Header-nav {
    display: none;
}
</style>

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

Move Navigation above Site Title/Logo

[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

Then, use

<style>
footer.Footer {display:none;}
</style>

Blog

Align Left Blog Date

/* align left blog date - blog list */
.Blog-meta.BlogList-item-meta {
    justify-content: left;
}
/* align left blog date - blog detail */
.Blog-meta.BlogItem-meta {
    justify-content: start;
}

Align Left Blog Title

/* align left blog title - blog list */
.BlogList-item-title {
    text-align: left !important;
}
/* align left blog title - blog detail */
h1.BlogItem-title {
    text-align: left !important;
}