Custom CSS for Wexley Tempalte Squarespace

Wexley: A mosaic gallery that adapts to the size of your images makes this an optimal website template for photographers and creative professionals.

wexley-squarespace

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

4. How to find Page ID: https://beaverhero.com/squarespace-how-to/

body#collection-56d86c682b8dde72910d59bd is Page ID. Each page will have different ID

Header

Hide Site Title

Entire Site

.logo {
    display: none !important;
}

One Page

body#collection-56d86c682b8dde72910d59bd .logo {
    display: none !important;
}

Hide Navigation

Entire Site

/* Desktop - Tablet */
div#topNav {
    display: none;
}
/* Mobile */
div#mobileMenuLink {
    display: none;
}

One Page

/* Desktop - Tablet */
body#collection-56d86c682b8dde72910d59bd div#topNav {
    display: none;
}
/* Mobile */
body#collection-56d86c682b8dde72910d59bd div#mobileMenuLink {
    display: none;
}

Full-width Header Background Color

div#headerWrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background: green;
}

div#pageWrapper {
    margin-top: 115px;
}

Hide Header

Entire Site

/* Desktop - Tablet */
header#header {
    display: none;
}
/* Mobile */
div#mobileMenuLink {
    display: none;
}

One Page

/* Desktop - Tablet */
body#collection-56d86c682b8dde72910d59bd header#header {
    display: none;
}
/* Mobile */
body#collection-56d86c682b8dde72910d59bd div#mobileMenuLink {
    display: none;
}

Underline Navigation Active Link

#topNav li.active-link a {
    text-decoration: underline;
}

Align Right Navigation

div#topNav {
    float: right !important;
}

Change “Menu” word on Mobile

#mobileMenuLink a {
    visibility: hidden;
}
#mobileMenuLink a:after {
    visibility: visible;
    content: "New Menu";
    display: block;
    text-align: center;
    font-size: 20px;
    margin-top: -20px;
}

Change Menu Color (Mobile)

div#mobileMenuLink {
    background: #ff0000;
    padding-top: 10px;
}
div#mobileMenuLink a {
    color: #fff;
    font-size: 20px !important;
}

Disable Click on Navigation Active Link

#topNav .active-link a {
    pointer-events: none;
}

Footer

Remove Footer

Entire Site

div#footerWrapper {
    display: none;
}

One Page

body#collection-56cddf2007eaa02bd47a4704 div#footerWrapper {
    display: none;
}

Blog – Blog Posts

Remove Post Date

/* Blog List Page */
.view-list.collection-type-blog .published {
    display: none;
}
/* Blog Post Page */
.view-item.collection-type-blog time.published {
    display: none;
}

Remove Post Category

.meta .categories {
    display: none;
}

Remove Post Tag

.meta .tags {
    display: none;
}

Increase Post Content Width

Blog List Page

.view-list.collection-type-blog section#page {
    max-width: 100%;
}

Blog Post Page

.view-item.collection-type-blog section#page {
    max-width: 100%;
}

Portfolio

Change prev/next

/* prev */
span.control.prev-slide {
    visibility: hidden;
}
span.control.prev-slide:after {
    visibility: visible;
    content: "New Prev";
    font-size: 15px;
    color: #ff0000;
}
/* Next */
span.control.next-slide {
    visibility: hidden;
}
span.control.next-slide:before {
    visibility: visible;
    content: "New Next";
    font-size: 17px;
    color: #ff0000;
}

Featured Image: Squarespace.com

Share this post:

If you have any questions, just fill in form below

Each FREE/PAID option will have different priorities.
If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Posted in