Anya Template: Beautiful banners capture the spirit of your engagement in this enchanting website template.
In this post
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