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;
}
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
This is very helpful thanks. I have created significant customisation on my York template site which runs under developer mode. But I am more of a designer with some code abbility.
Is there a way to put the index page navigation at the top of the screen instead of the of bottom or including the bottom? the site is nuaa.org.au
here is an example page https://nuaa.squarespace.com/dancewize-nsw
Sorry for the delay. The comment function has problem.
Sent to your email.
I’m having this same problem!
I found a related solution for the Brine template here: https://forum.squarespace.com/topic/152254-disable-the-link-on-navigation-folders-in-brine-template/
But I’m still lost with Harris (York) template.
Sent to your email. Please check.
This worked!
a.index-item-link {
pointer-events: none !important;
cursor: default !important; }
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
Answered via your email.
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!
See this code. https://beaverhero.com/york-template-squarespace/#Remove_Header_(One_Page)
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!
Which padding? Can you share link to page in your question?
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!
Can you share link to portfolio page?
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!
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.
Have you solved it yet?
Can you share link to your site? I can check easier.
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!