Ishimoto: Create a distinctive portfolio with this website template’s full-bleed carousel gallery.

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 Color

Entire Site

div#logo .logo a {
    color: #ff0000;
}

One Page

body#collection-56c4ae8bf850824f1c54345e div#logo .logo a {
    color: #ff0000;
}

Hide Site Title

Entire Site

h1.logo a {
    display: none !important;
}

One Page

body#collection-56c4ae6f8a65e233db57a0c6 h1.logo a {
    display: none !important;
}

Hide Navigation

Entire Site

/* Desktop - Tablet */
div#topNav {
    display: none;
}
/* Mobile */
div#mobileMenuLink {
    display: none;
}

One Page

/* Desktop - Tablet */
body#collection-56c4ae6f8a65e233db57a0c6 div#topNav {
    display: none;
}
/* Mobile */
body#collection-56c4ae6f8a65e233db57a0c6 div#mobileMenuLink {
    display: none;
}

Hide Header

Entire Site

header#header {
    display: none;
}

One Page

body#collection-56c4ae6f8a65e233db57a0c6 header#header {
    display: none;
}

Header Background Color

Entire Site

div#headerWrapper {
    background: #ff0000;
}

One Page

body#collection-56c4ae6f8a65e233db57a0c6 div#headerWrapper {
    background: #ff0000;
}

Menu Background Color (Mobile)

/* Menu */
div#mobileMenuLink {
    background: #ff0000;
}
/* Menu text */
div#mobileMenuLink a {
    text-transform: lowercase;
    color: #fff;
    font-size: 40px !important;
}

Mobile Menu Style

div#mobileMenuLink a {
    font-weight: bold;
    font-size: 20px !important;
    color: #ff0000;
    letter-spacing: 2px;
}

Change word “Menu”

#mobileMenuLink a {
    visibility: hidden;
}
#mobileMenuLink a:after {
    visibility: visible;
    content: "New Menu";
    display: block;
    text-align: center;
    font-size: 20px;
    margin-top: -20px;
}

Disable Click on Navigation Active Link

#topNav .active-link a {
    pointer-events: none;
}

Underline Navigation Active Link

#topNav li.active-link a {
    text-decoration: underline;
}

Site Title (Right) – Navigation (Left)

#topNav {
    float: left !important;
    left: 30px !important;
}
div#logo {
    float: right;
}

Mobile Navigation Text Bold

div#mobileNav #nav a {
    font-weight: bold;
}

Mobile Navigation Items Font Size

#mobileNav #nav a {
    font-size: 20px !important;
}

Fixed Header

/* Fixed Header - Desktop */
header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
div#pageWrapper {
    margin-top: 100px;
}
/* Fixed Header - Mobile */
div#mobileMenuLink {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}

Disable Link on Site Title/Logo

Entire Site

.logo a {
    pointer-events: none;
}

One Page

body#collection-56c4ae6f8a65e233db57a0c6 .logo a {
    pointer-events: none;
}

Footer

Remove Footer

Entire Site

div#footerWrapper {
    display: none;
}

One Page

body#collection-56c4ae6f8a65e233db57a0c6 div#footerWrapper {
    display: none;
}

Footer Background Color

div#footerWrapper {
    background: #ff0000;
}

Blog

Remove Post Date

.published {
    display: none;
}

Change “Older/Newer” Text

/* Change Older */
.collection-type-blog .pagination a:last-child {
    visibility: hidden;
}
.collection-type-blog .pagination a:last-child:before {
    visibility: visible;
    content: "New Older";
}
/* Change Newer Page 2 to Page N */
:not(#collection-5cc8ac424192028a62a47d9e) .pagination a:first-child {
    visibility: hidden;
}
:not(#collection-5cc8ac424192028a62a47d9e) .pagination a:first-child:after {
    visibility: visible;
    content: "New Newer";
    margin-left: -50px;
}
/* Change Newer Page 1 */
body#collection-5cc8ac424192028a62a47d9e .pagination {
    visibility: hidden;
}
body#collection-5cc8ac424192028a62a47d9e .pagination:before {
    visibility: visible;
    content: "New Newer /";
}

Other

Page Background Color

Entire Site

div#pageWrapper {
    background: #ff0000;
}

One Page

body#collection-56c4ae8bf850824f1c54345e div#pageWrapper {
    background: #ff0000;
}

Page Background Image

Entire Site

div#pageWrapper {
    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

body#collection-56c4ae8bf850824f1c54345e div#pageWrapper {
    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;
}

Featured Image: Squarespace.com