Moksha Template: Interactive galleries and full-width banners encourage visitors to explore your site.
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..
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
Remove Site Logo
Entire Site
.Header-branding { visibility: hidden; } a.Mobile-bar-branding { visibility: hidden; }
One Page
body#collection-58b5ed10bf629a356f09728a .Header-branding { visibility: hidden; } body#collection-58b5ed10bf629a356f09728a a.Mobile-bar-branding { visibility: hidden; }
Navigation Hover Color
.Header-nav-item:hover { color: #ff0000 !important; }
Remove Navigation
Entire Site
.Header-nav { display: none; }
One Page
body#collection-58b5ed10bf629a356f09728a .Header-nav { display: none; }
Dropdown Menu Background Color
.Header-nav-folder { background: #000 !important; }
Remove Hamburger Icon
button.Mobile-bar-menu { display: none; }
Change Hamburger Icon Color
button.Mobile-bar-menu svg { stroke: #ff0000; }
Replace Hamburger Icon with word “Menu”
button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-family: proxima-nova; color: #000; font-size: 20px; }
Replace Hamburger Icon with Custom Icon
button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; width: 30px; height: 30px; display: block; }
Add word “Menu” beside Hamburger Icon
button.Mobile-bar-menu:before { content: "Menu"; font-size: 20px; color: #000; position: absolute; right: 50px; top: 25px; }
Navigation Overlay Color
.Mobile-overlay-menu { background: #f1f2f3; } .Mobile-overlay { background: #f1f2f3 !important; } button.Mobile-overlay-close { background: #f1f2f3 !important; }
Navigation Overlay Width
.Mobile-overlay { width: 70%; }
Header Background Color
Entire Site
.Header.Header--top { background: #f1f2f3; } .Mobile-bar { background: #f1f2f3; }
One Page
body#item-58a214273e00bea4494186a7 .Header.Header--top { background: #f1f2f3; } body#item-58a214273e00bea4494186a7 .Mobile-bar { background: #f1f2f3; }
Remove Header
Entire Site
.Mobile-bar { display: none; } .Header.Header--top { display: none !important; }
One Page
body#item-58a214273e00bea4494186a7 .Mobile-bar { display: none; } body#item-58a214273e00bea4494186a7 .Header.Header--top { display: none !important; }
Footer
Footer Background Color
Entire Site
footer.Footer { background: #000; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { background: #000; }
Footer Background Image
Entire Site
footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { display: none !important; }
Blog
Remove Post Date
time.Blog-meta-item.Blog-meta-item--date { display: none; }
Align Left Post Date/Title
.BlogList-item * { text-align: left !important; justify-content: left !important; }
Remove Post Social Share
.BlogItem-share { display: none; }
Other
Page Background Color
Entire Site
.Main { background: #000; }
One Page
body#collection-58b5ed10bf629a356f09728a .Main { background: #000; }
Page Background Image
Entire Site
.Main { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
One Page
body#collection-58b5ed10bf629a356f09728a .Main { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
Remove Vertical Line in Banner
/* hide vertical line */ .Index-page-scroll-indicator { visibility: hidden; }
Featured Image: Squarespace.com