Harris Template: Draw in new clients and promote your services with this website template’s clean lines and simple layouts.

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

Hide Logo

Entire Site

.logo-image {
    display: none;
}

One Page

body#collection-579a49b8197aea5a0f3baf55 .logo-image {
    display: none;
}

Disable Logo Link

.logo-image {
    pointer-events: none;
}

Navigation Hover Color

.nav-item.collection a:hover {
    color: #ff0000;
}

Hide Navigation

Entire Site

.site-navigation {
    display: none;
}

One Page

body#collection-579a49b8197aea5a0f3baf55 .site-navigation {
    display: none;
}

Add vertical lines between Navigation Items

/* Add vertical links */
.site-navigation .nav-item {
    border-right: 1px solid #000 !important;
}
/* Hide vertical last item */
.site-navigation .nav-item:last-child {
    border-right: none !important;
}
/* Change spacing */
.site-navigation .nav-item span {
    padding-right: 10px;
}

Header Background Color

Entire Site

/* Desktop */
header#header {
    background: #fff;
    margin: 0 auto;
}
/* Mobile */
.mobile-bar-wrapper {
    background: #fff;
}

One Page

/* Desktop */
body#collection-579a49b8197aea5a0f3baf55 header#header {
    background: #fff;
    margin: 0 auto;
}
/* Mobile */
body#collection-579a49b8197aea5a0f3baf55 .mobile-bar-wrapper {
    background: #fff;
}

Fixed Header

Entire Site

/* Mobile */
.mobile-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
/* Remove Overlap */
div#site {
    padding-top: 150px !important;
}
/* Desktop */
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

One Page

/* Mobile */
body#collection-579a49b8197aea5a0f3baf55 .mobile-bar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
/* Remove Overlap */
body#collection-579a49b8197aea5a0f3baf55 div#site {
    padding-top: 150px !important;
}
/* Desktop */
body#collection-579a49b8197aea5a0f3baf55 header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

Remove Header

Entire Site

/* Desktop */
header#header {
    display: none;
}
/* Mobile */
.mobile-bar-wrapper {
    display: none;
}

Remove Hamburger Icon

label.mobile-nav-toggle-label {
    visibility: hidden;
}

Add word “Menu” beside Hamburger Icon

label.mobile-nav-toggle-label:after {
    content: "Menu";
    position: absolute;
    top: 30px;
    left: 50px;
    color: #000;
}

Navigation Overlay Background Color

div#overlayNav {
    background: #fff;
}

Decrease Padding Top Navigation Overlay

div#overlayNav {
    min-height: 50vh;
    bottom: unset;
}

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #fff;
}

One Page

body#collection-579a49b8197aea5a0f3baf55 footer#footer {
    background: #fff;
}

Remove Footer

Entire Site

footer#footer {
    display: none;
}

One Page

body#collection-579a49b8197aea5a0f3baf55 footer#footer {
    display: none;
}

Footer Background Image

Replace https://static1…with your image url.

Entire Site

footer#footer {
    background-image: url(https://static1.squarespace.com/static/573a043…/t/578e66d…/1554303114566/?format=1500w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

One Page

body#collection-579a49b8197aea5a0f3baf55 footer#footer {
    background-image: url(https://static1.squarespace.com/static/573a043…/t/578e66d…/1554303114566/?format=1500w);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

Other

Align Left Page Description

Page description max-width is 50vw. So you can only align left in that range.

You can also increase max-width to 100% (100vw), by using this code

Increase Page Width (All Pages)

.page-text-wrapper.clearfix {
    max-width: 100% !important;
}

Increase Page Width (One Page)

body#collection-573b5d9e7da24fb15beeb613 .page-text-wrapper.clearfix {
    max-width: 100% !important;
}

and align left, use this code

All Pages

.page-description {
    text-align: left;
}

One Page

body#collection-573b5d9e7da24fb15beeb613 .page-description {
    text-align: left;
}

Page Background Color

Entire Site

.overflow-wrapper {
    background: #fff;
}

One Page

.overflow-wrapper {
    background: #fff;
}

Page Background Image

Replace https://beaverhero.com/wp-content…with your image url.

Entire Site

.overflow-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/wexley-squarespace.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}

One Page

.overflow-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/wexley-squarespace.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}

Blog Page – Blog Posts

Remove Post Date

.Blog-meta-item--date {
    display: none !important;
}

Remove Post Tags

.Blog-meta-item--tags {
    display: none !important;
}

Remove Post Separator

.view-list article:before {
    visibility: hidden;
}

Contact Page

Change Submit Button Style

.form-button-wrapper .button {
    background: #fff !important;
    border-color: #ff0000 !important;
    color: #f1f2f3 !important;
    font-size: 50px !important;
}

Featured Image: Squarespace.com