Some CSS you will need when using Avenue Template Squarespace!

Notes

• Adding Custom CSS at 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

Hide Site Title on Mobile

@media screen and (max-width:767px) {
#logo {
    display: none;
}
}

Hide Site Tagline (Only Mobile)

@media screen and (max-width:767px) {
.logo-subtitle {
   display: none;
}
}

Resize Logo

Logo Container = 30% Header Width

Logo Image = 40% Logo Container Width

You can change all or just change height: 100px and width: 40% 🙂

#logo {
    width: 30%;
}
#logo .logo {
    width: 100%;
    height: 100px;
}
#logo img {
    width: 40%;
}

Reduce mobile header padding

@media screen and (max-width:767px) {
/* Menu - Logo Site Title Padding */
#mobileMenuLink {
    margin-bottom: 5px;
}
/* Logo Site Title Content Padding */
#header {
    margin-bottom: 0;
}
}

Disable Responsive Top Menu

@media screen and (max-width:767px) {
div#mobileMenuLink {
    display: none;
}
div#mobileNav {
    height: auto;
}
#mobileNav ul {
    display: flex;
    justify-content: center;
}
div#mobileNavWrapper {
    border: none !important;
}
}

Reduce space between Header/Nav and Content on pages

section#page {
    padding-top: 0;
}

Logo/Navigation in 2 Rows (Logo (top), Nav (bottom))

#logo, #topNav {
    width: 100%;
    text-align: center;
}
#topNav nav {
    float: none;
    display: inline-block;
}
#topNav ul {
    float: none;
    display: inline-block;
}

Hide Header on Mobile

@media screen and (max-width:767px) {
/* Hide Logo */
#header {
    display: none;
}
/* Hide Menu */
div#mobileMenuLink {
    display: none;
}
/* Hide Logo and Menu */
#mobileMenuLink, #header {
    display: none;
}
}

Sticky Header (Desktop & Tablet)

@media screen and (min-width:768px) {
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 100px;
    z-index: 10;
}
}

Sticky Header (Mobile)

@media screen and (max-width:767px) {
div#mobileMenuLink {
    position: fixed;
    top: 0;
    left: 45%;
    z-index: 10;
}
div#mobileNav {
    margin-top: 20px;
    position: fixed;
    z-index: 10;
    left: 45%;
}
header#header {
    position: fixed;
    left: 45%;
    margin-top: 30px;
    z-index: 10;
}
section#page {
    margin-top: 30px;
}
}

Change Header Background Color

#canvas {
    max-width: 100% !important;
}
#header {
    margin: -85px -75px;
    padding: 10px 75px !important;
    background: gray;
}

Move navigation above logo

header#header {
    display: flex;
    flex-direction: column-reverse;
}
#topNav nav {
    width: 100%;
}
#topNav ul {
    display: inline-block;
}

Rename Menu (Mobile)

#mobileMenuLink a {
    visibility: hidden;
}
#mobileMenuLink a:before {
    content: "Click here to view Menu";
    visibility: visible;
    margin-left: 20px;
}

Menu to Burger icon

div#mobileMenuLink>a:before {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    font-size: 30px;
}
div#mobileMenuLink>a {
    font-size: 0 !important;
}

Customize Menu Style (Mobile) 

@media only screen and (max-width: 750px) {
div#mobileMenuLink {
    background-color: #ff0000;
}
div#mobileMenuLink a {
    color: #fff;
    font-size: 20px !important;
    font-weight: 600;
    font-family: Roboto, sans-serif;
    padding-top: 10px;
}
}

Force Desktop Navigation on Mobile

@media screen and (max-width:640px) {
div#topNav {
    display: block !important;
}
div#mobileMenuLink {
    display: none;
}
h1.logo {
    height: 50px !important;
}
#topNav nav li {
    margin-right: 10px;
}
}

Mobile drop down to expand below “Menu”

@media only screen and (max-width: 750px) {
 #mobileMenuLink a {
     position: absolute;
     top: 10px;
     left: 0;
     right: 0;
 }
 div#mobileNav.menu-open {
     margin-top: 30px !important;
 }
 }

Footer

Footer Background Color & Footer Full-width

/* Footer Full width and background color */
#canvas {
    max-width: 100%;
    position: relative;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px;
    background: gray;
}
section#page {
    margin-bottom: 150px;
}
/* Footer Text Color */
#footer {
    color: white;
}
/* Footer Link Color */
#footer a {
    color: white;
}

Updating…

Home Page

Remove the hover effect on the home page

#projectThumbs .project:hover .project-image .intrinsic {
    opacity: 1 !important;
}

Change Hover Color

#projectThumbs .project:hover .project-image {
    background: red !important;
}
#projectThumbs .project:hover .project-image .intrinsic {
    opacity: 0;
}

How to add background image for home page only

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/08/Remove-quantity-squarespace.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 10%;
}
</style>

Project titles always on top of project thumbnails

#projectThumbs .project>div {
    display: flex;
    flex-direction: column-reverse;
}
#projectThumbs .project-title {
    margin-bottom: 10px;
}

 

Gallery Page (Single)

Make the P and N capitalized in Prev/Next

div#projectNav {
    text-transform: capitalize;
}

Full-width image in Gallery Page

#projectPages .project-meta {
    margin-right: 0 !important;
    width: 100% !important;
    float: none !important;
}
#projectPages .project.active-project {
    margin-right: 0 !important;
}

Remove Site Title from Photo Gallery Page (Single Page)

.homepage #logo {
    display: none;
}
.homepage.view-list #logo {
    display: block;
}

Make Gallery Description Sticky

.project-meta {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

Remove “Back To…” link from Gallery Pages

.project-controls a {
    display: none;
}

Add border to all images

#projectPages .project .image-list img {
    border: 1px solid #000 !important;
}

Blog – Single Post

Hide the Sidebar on Blog Posts but NOT on the Blog Page?

.view-item #sidebar {
    display: none;
}

Change the width of blog post

@media screen and (min-width:992px) {
/* Change blog posts width on Desktop */
.view-item .article-wrapper {
    margin-right: 300px !important;
}
}

If you want to change width on Tablet. I think you should hide Sidebar 🙂

Move blog post title to top

.view-item article {
    display: flex;
    flex-direction: column;
}
.view-item article header {
    order: 1;
}
.view-item article .special-content {
    order: 2;
}
.view-item article .entry-content {
    order: 3;
}
.view-item article footer {
    order: 4;
}

Remove Blog Dates

.view-item .meta {
    display: none;
}

 

Other

Remove Heading from all Pages

/* Remove Heading - Gallery Page */
#projectPages .project-title {
    display: none;
}
/* Remove Heading - Pages */
.sqs-block-content h1 {
    display: none;
}

Change the background image for each page

First, you need to know Page ID. Then use this css

#collection-56d4a580e707eb7a02e4308b is Page ID

background-repeat includes: no-repeat, repeat-x, repeat-y

Background-size includes: cover, contain, auto

<style>
body {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/08/Remove-quantity-squarespace.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 10%;
}
</style>

Featured Image: DarkWorkX