Buy me a coffee

Custom CSS for York Template Squarespace

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

York Template: Share the stories behind your portfolio with a stacked landing page and expanded case studies

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

Header

Remove Header (One Page)

Add to Page Settings > Advanced > Header

<style>
header#header {
    display: none;
}
.mobile-bar-wrapper {
    display: none;
}
</style>

Fixed Header (Desktop/Tablet)

header#header {
    position: fixed;
    left: 0;
    right: 0;
}
main#page {
    margin-top: 100px;
}

Header Background

header#header {
    background: #ff0000;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

Header Background for Specific Page

First, you need to find Page ID.

Then, use

body#collection-565cb9dae4b02fbb0a540ec2 header#header {
    background: #ff0000;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

Header Background on Scroll (Phone)

.mobile-bar-wrapper {
    background: #ff0000 !important;
}

Hamburger (Left) & Site Title (Right)

.mobile-bar-wrapper {
    flex-direction: row-reverse;
}

Word “Menu” below Hamburger Icon

label.mobile-nav-toggle-label:after {
    content: "Menu";
    font-size: 15px;
}

Align Left Site Title (Phone)

.mobile-bar-flex-child {
    display: none !important;
}

Remove menu-icon in mobile view

svg.Icon.Icon--hamburger {
    display: none;
}

Make “Contact” in Navigation look like a CTA button

div#secondaryNavWrapper .nav-item:last-child a {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    border: 2px solid #000;
}
div#secondaryNavWrapper .nav-item:last-child a:hover {
    background: #fff;
    color: #000;
}

Disable hamburger menu

.mobile-bar-wrapper {
    display: none;
}
[data-nc-base="header"] {
    display: flex;
}
div#site {
    padding-top: 0 !important;
}

How to remove Site title from one page only

First, you need to find Page ID.

Then, use

body#collection-566f2ba1a2bab8f8e982eb7d .site-title {
    display: none;
}

Reduce the vertical spacing of the mobile menu to the top bar

div#overlayNav {
     min-height: unset !important;
     bottom: unset !important;
 }

Project Pages

Decrease Spacing between Title & Description

h1.page-title {
    margin-bottom: 0 !important;
}

Increase width of text box for the caption (Home page)

You can change width and height 🙂

.index-item-text-wrapper {
    top: 4vw;
    right: 4vw;
    bottom: 4vw;
    left: 4vw;
    width: calc(100% - 8vw);
    height: calc(100% - 8vw);
}

Adjust the spacing between description and the first image on my Project page

.page-text-wrapper.clearfix {
    margin-bottom: 10px !important;
}

Underline an active link in the Navigation

.nav-item.active {
    text-decoration: underline;
}

Add a corner radius to the images on the main index page

.index-item.has-item-image {
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Other

Changing the background colour of certain pages

First, you need to find Page ID.

Then, use

body#collection-566f2ba1a2bab8f8e982eb7d .overflow-wrapper {
    background: #ff0000;
}

 

20 thoughts on “Custom CSS for York Template Squarespace”

  1. Hey there,

    This question is specific to the ‘York Template’

    On the main index page, I’m looking to remove the ‘Index Item Text’ and click-through function on an individual index section, the idea is to use the full-length banner as an image in between information links (above and below) rather than a link to an information page.

    I was hoping there would be a line of CSS that I could inject or even a suggestion on another process of uploading which might work.

    I’d appreciate any help on this!

    Thanks

    Reply
  2. Hallo,
    thank you so much for all the great css codes 🙂

    Is there any way to reduce the font size on mobile?
    the “normal” way to edit the h1 h2 h3 via css is not possible in this template.
    any idea ?

    thank you and keep up your amazing work <3
    love from germany
    sarah

    Reply
  3. Hey

    Thanks for the codes!

    Is there a way to remove the header from one specific page on mobile [YORK family]?

    (Currently changed header colour to match the background on all)

    Thank you!

    Reply
  4. Hi there,

    Thank you for a very helpful custom CSS for this theme!
    Is there any way to decrease the padding inside the page.
    I’m making my portfolio and I want to have images to be bigger (less white space on the left and right).

    Thank you!

    Reply
  5. Hi there,

    Thank you for a very helpful custom CSS for this theme!
    Is there any way to decrease the padding inside the page.
    I’m making my portfolio and I want to have images to be bigger (less white space on the left and right).

    Thank you!

    Reply
  6. Hello There,

    Thank you for the very helpful custom CSS!
    Is there a way to add the “Underline active link” to the individual project pages?
    The underline does not activate while viewing individual projects.
    Additionally is there a way to customize the vertical spacing and the stroke and of the underline?
    Thank you so much!

    Reply
    • I applied:

      .nav-item.active {
      border-bottom: 2px solid currentColor;
      }

      however the individual project pages do not inherit the underline. Is there a way to apply this to individual project pages?

      Is there a way to center the text? For some reason the text is not centered within the container.

      Reply
  7. Hi!

    Using York template, wondering if I can have the banner ONLY on one page (the home page). But remove it from all other pages.

    Thanks!

    Reply

Leave a Reply to Tuan Phan 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