Custom CSS for York Template Squarespace

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:

Take your CSS to next level!
Start learning HTML/CSS to style your Squarespace Site.