Buy me a coffee

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

  • Adding Custom CSS to Home > Design > Custom CSS
  • Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
  • With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
  • Send me a message if you have any questions/the code doesn’t work (free).
  • You can send a donation if this is helpful for you 😉

Header

Disable Logo Link

#logoImage a {
    pointer-events: none;
}

Remove Logo

Entire Site

h1#logoImage {
    visibility: hidden !important;
}

One Page

<style>
h1#logoImage {
    visibility: hidden !important;
}
</style>

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

<style>
div#headerNav {
    display: none !important;
}
</style>

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

<style>
header#header {
    display: none;
}
</style>

Header Background Color on Sroll

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

Header Background Image

header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #f1f2f3;
}

One Page

<style>
footer#footer {
    background: #f1f2f3;
}
</style>

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

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

Remove Footer

Entire Site

footer#footer {
    display: none !important;
}

One Page

<style>
footer#footer {
    display: none !important;
}
</style>

Featured Image: Squarespace.com

2 thoughts on “Custom CSS for Pacific Template Squarespace”

  1. 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

    Reply
    • Hi Dani. If you share site url, i can take a look.
      Me and another Circle member are writing CSS Class/ID for all templates, but it will probably take 2-3 weeks to complete. If you are interested, please let me know, I will send it once completed.

      Reply

Leave a Reply to Dani Dudovick Cancel reply

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder