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

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

 

Share this post:

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
nick Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
nick
Guest
nick

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