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

Site Title Custom Font

@font-face { 
  font-family: fontname; 
  src: url(https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5e3f7cb899dd6e23d8b1e836/1581219002767/nexa-regular.otf); 
} 
/* Desktop */
div#site-title-wrapper h1#site-title a{
    font-family: fontname;
}
/* mobile */
nav#mobile-navigation span#mobile-navigation-title a{
    font-family: fontname;
}

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

Header Background Image

div#navigation-top {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
}

Left Menu – Logo – Right Menu

Add to Settings > Advanced > Code Injection > Header

<script>
jQuery(document).ready(function($){
   $('div#site-title-wrapper').insertAfter('.horizontal-navigation-bar nav>ul>li:nth-child(4)');
})
</script>
<style>
div#site-title-wrapper:nth-child(n+6) {
    display: none !important;
}
  body.canvas-setting-site-width .horizontal-navigation-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
</style>

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