Custom CSS for Anya Template Squarespace

Anya Template: Beautiful banners capture the spirit of your engagement in this enchanting website template.

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 Navigation

header#header {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
}
#page { margin-top: 100px !important; }

Adjust text (title and description) to Left Align

.desc-wrapper {
    text-align: left;
}

Replace Hamburger Menu Icon with word “Menu”

.mobile-nav-toggle {
    visibility: hidden;
}
.mobile-nav-toggle:after {
    visibility: visible;
    content: "Menu";
    position: absolute;
    right: 10px;
    font-size: 20px;
    color: #ff0000;
}

Turn last Navigation item to Button

nav#mainNavigation div:last-child a {
    background: #ff0000 !important;
    border-color: #ff0000 !important;
    border-radius: 30px !important;
    color: #000 !important;
    font-size: 20px;
}

Navigation (Right) – Hamburger Menu (Left)

.header-inner {
    display: flex;
    flex-direction: row-reverse;
}
.mobile-nav-toggle {
    left: 20px;
}

Navigation (Left) – Site Title (Right)

.header-inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

Site Title (Top) – Navigation (Bottom)

div#siteTitleWrapper {
    width: 100% !important;
    display: block !important;
}
div#headerNav {
    display: block !important;
    text-align: center !important;
}
#header #siteTitle {
    width: 100% !important;
    text-align: center;
}

Hide Site Title

div#siteTitleWrapper {
    display: none !important;
}

Hide Site Title (One Page)

body#collection-53e111f2e4b0cee5b6b02041 div#siteTitleWrapper {
    display: none !important;
}

Underline Nav Active Link

.index.active {
    text-decoration: underline;
}

Other

Hide Blog Banner

.collection-type-blog .banner-thumbnail-wrapper {
    display: none;
}

Reduce Padding below Banner

.desc-wrapper {
    padding-bottom: 0;
}

Change Page Color (One Page)

First, you need to find Page ID.

Then, use

body#collection-53e111f2e4b0cee5b6b02041 #content {
    width: 100%;
    display: block;
    background: red;
}

Change Page Background (One Page)

First, you need to find Page ID.

Then, use

body#collection-53e111f2e4b0cee5b6b02041 #content {
    background-image: url(https://answers.squarespace.com/users/185390/photo/view.html?time=1553020353425&s=24);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Featured Image: Squarespace.com