Custom CSS for Five Template Squarespace

Five Template: This clean website template offers versatile header, sidebars, and banner images to intrigue your visitors.

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  with your site url. I’ll give you exact CSS..

4. How to find Page ID: https://beaverhero.com/squarespace-how-to/

body#collection-56d86c682b8dde72910d59bd is Page ID. Each page will have different ID

Header

Remove Site Title

Entire Site

h1#site-title a {
    visibility: hidden;
}
span#mobile-navigation-title a {
    visibility: hidden;
}

One Page

body#collection-58b5ed10bf629a356f09728a h1#site-title a {
    visibility: hidden;
}
body#collection-58b5ed10bf629a356f09728a span#mobile-navigation-title a {
    visibility: hidden;
}

Navigation Hover Color

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

Remove Navigation

Entire Site

nav#main-navigation {
    display: none;
}

One Page

body#collection-58b5ed10bf629a356f09728a nav#main-navigation {
    display: none;
}

Navigation Drop-down Color

.subnav>ul {
    background: #f1f2f3 !important;
}

Change Hamburger Icon Color

span#mobile-navigation-label {
    color: #ff0000 !important;
}

Replace Hamburger Icon with word “Menu”

#mobile-navigation-label:before {
    content: "Menu";
    color: #000;
    font-size: 15px;
    font-family: "proxima-nova";
}

Replace Hamburger Icon with Custom Icon

#mobile-navigation-label: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: 20px;
    height: 20px;
}

Mobile Navigation Background

#mobile-navigation>ul {
    background: #f1f2f3;
}

Align Mobile Navigation Items

#mobile-navigation>ul>li {
    text-align: left;
    padding-left: 20px;
}

Header Background Color

Entire Site

nav#mobile-navigation {
    background: #f1f2f3;
}
div#navigation-top {
    background: #f1f2f3;
}

One Page

body#item-58a214273e00bea4494186a7 nav#mobile-navigation {
    background: #f1f2f3;
}
body#item-58a214273e00bea4494186a7 div#navigation-top {
    background: #f1f2f3;
}

Remove Header

Entire Site

div#navigation-top {
    display: none;
}
nav#mobile-navigation {
    display: none !important;
}

One Page

body#item-58a214273e00bea4494186a7 nav#mobile-navigation {
    display: none;
}
body#item-58a214273e00bea4494186a7 div#navigation-top {
    display: none !important;
}

Footer

Footer Background Color

Entire Site

div#page-footer-wrapper {
    background: #000;
}

One Page

body#collection-58b5ed10bf629a356f09728a div#page-footer-wrapper {
    background: #000;
}

Footer Background Image

Entire Site

div#page-footer-wrapper {
    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

body#collection-58b5ed10bf629a356f09728a div#page-footer-wrapperr {
    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;
}

Remove Footer

Entire Site

div#page-footer-wrapper {
    display: none !important;
}

One Page

body#collection-58b5ed10bf629a356f09728a div#page-footer-wrapper {
    display: none !important;
}

Blog

Remove Post Date

time.published {
    display: none;
}

Remove Post Author

.author {
    display: none;
}

Remove Post Tags

.tags {
    display: none;
}

Remove Post Categories

.categories {
    display: none;
}

Remove Post Social Share Icons

.ss-social-button-wrapper {
    display: none;
}

Sticky Sidebar when Scrolling

div#sidebar-one-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

Other

Align Left Page Title

All Pages

h1#page-title {
    text-align: left;
}

One Page

body#collection-56cb3f0d2b8dde4bd7a65d0e h1#page-title {
    text-align: left;
}

Decrease Page Banner Height

All Pages

div#banner-area {
    padding-top: 20px;
    padding-bottom: 20px;
}

One Page

body#collection-56cb3f0d2b8dde4bd7a65d0e div#banner-area {
    padding-top: 20px;
    padding-bottom: 20px;
}

Featured Image: Squarespace.com

Share this post:

Leave a Reply

avatar
  Subscribe  
Notify of