Custom CSS for Pacific Template Squarespace

This template is in Pacific Family, so you can use many other CSS here.

Pacific Template: Intertwine full-width imagery and splashy text in captivating, scrolling pages.

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

Disable Logo Link

#logoImage a {
    pointer-events: none;
}

Entire Site

h1#logoImage {
    visibility: hidden !important;
}

One Page

body#collection-535813a6e4b0c3ad7382ee7a h1#logoImage {
    visibility: hidden !important;
}

Strike Navigation Hover Item

#headerNav a:hover {
    text-decoration: line-through;
}

Navigation Hover Item Color

#headerNav a:hover {
    color: #ff0000 !important;
}

Remove Navigation

Entire Site

div#headerNav {
    display: none !important;
}

One Page

body#collection-535813a6e4b0c3ad7382ee7a div#headerNav {
    display: none !important;
}

Hide Navigation Items

First Item

nav#mainNavigation .index:nth-child(1) {
    visibility: hidden;
}

Second Item

nav#mainNavigation .index:nth-child(2) {
    visibility: hidden;
}

Do Similar!

Increase Logo Size

#logoImage img {
    max-width: 500px;
    width: 500px;
}

Remove Hamburger Icon

.mobile-nav-toggle-label {
    display: none;
}

Replace Hamburger Icon with word “Menu”

.mobile-nav-toggle-label {
    visibility: hidden;
}
.mobile-nav-toggle-label:after {
    visibility: visible;
    content: "Menu";
    color: #fff;
    font-size: 15px;
    font-family: Raleway;
}

Replace Hamburger Icon with Custom Image/Icon

.mobile-nav-toggle-label {
    visibility: hidden;
}
.mobile-nav-toggle-label:after {
    visibility: visible;
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
}

Add word “Menu” beside Hamburger Icon

.mobile-nav-toggle-label:after {
    content: "Menu";
    font-size: 15px;
    color: #ff0000;
    position: absolute;
    left: 30px;
}

Hamburger Icon Color

.mobile-nav-toggle-label div {
    background: #ff0000 !important;
}

Navigation Overlay Color

div#overlayNav {
    background: #f1f2f3;
}

Decrease Padding Top Navigation Overlay

div#overlayNav {
    height: 50%;
}

Change “X” close Icon color

.mobile-nav-toggle-label div {
    background: #ff0000 !important;
}

Remove Header

Entire Site

header#header {
    display: none;
}

One Page

body#collection-535813a6e4b0c3ad7382ee7a header#header {
    display: none;
}

Header Background Color on Sroll

.show-on-scroll {
    background: #f1f2f3;
}

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #f1f2f3;
}

One Page

body#collection-535813a6e4b0c3ad7382ee7a footer#footer {
    background: #f1f2f3;
}

Footer Background Image

Entire Site

footer#footer {
    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-535813a6e4b0c3ad7382ee7a footer#footer {
    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

footer#footer {
    display: none !important;
}

One Page

body#collection-535813a6e4b0c3ad7382ee7a footer#footer {
    display: none !important;
}

Featured Image: Squarespace.com

Share this post:

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Tuan PhanDani Dudovick Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Dani Dudovick
Guest

Can I please get the CSS class or ID for the Pacific/Fulton Gallery Block, and specifically the Title and Description copy/caption or a link to documentation for all Class/ID descriptors for Pacific. Thanks in advance!! ~Dani