Artesia Template: Invite customers into your store with this enticing website template’s subtle page animations and beautiful layouts.
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 Title
Entire Site
.site-title { display: none; } .mobile-site-title { display: none; }
One Page
body#collection-577d16f6d2b8578b1b40b56b .site-title { display: none; } body#collection-577d16f6d2b8578b1b40b56b .mobile-site-title { display: none; }
Navigation Hover Color
.nav-item a:hover { color: #ff0000 !important; }
Hide Navigation Items
First Item
.nav-item:nth-child(1) { display: none !important; }
Second Item
.nav-item:nth-child(2) { display: none !important; }
Do Similar.
Remove Navigation
Entire Site
div#mainNavWrapper { display: none; }
One Page
body#collection-577d16f6d2b8578b1b40b56b div#mainNavWrapper { display: none; }
Site Title (Right) – Hamburger Icon (Left)
.mobile-bar-wrapper { flex-direction: row-reverse; }
Add word “Menu” beside Hamburger Icon
label.mobile-nav-toggle-label:after { content: "Menu"; position: absolute; right: 50px; top: 10px; color: #000; font-size: 20px; }
Replace Hamburger Icon with Custom Icon
label.mobile-nav-toggle-label { visibility: hidden; } label.mobile-nav-toggle-label: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: 20px; height: 20px; display: inline-block; }
Replace Hamburger Icon with word “Menu”
label.mobile-nav-toggle-label { visibility: hidden; } label.mobile-nav-toggle-label:after { visibility: visible; content: "New Menu"; color: #000; font-size: 20px; }
Change Hamburger Icon Color
label.mobile-nav-toggle-label svg { stroke: #ff0000 !important; }
Navigation Overlay Color
div#overlayNav { background: #f1f2f3; }
Navigation Overlay Width
div#overlayNav { width: 70%; background: #f1f2f3; }
Decrease space between Header & Navigation Overlay Items
div#overlayNav { min-height: 50vh; bottom: unset; }
Header Background Color
Entire Site
header#header { background: #f1f2f3; margin-top: 0; margin-bottom: 0; padding-top: 4vw; padding-bottom: 4vw; } .mobile-bar-wrapper { background: #f1f2f3 !important; }
One Page
body#collection-577d16f6d2b8578b1b40b56b header#header { background: #f1f2f3; margin-top: 0; margin-bottom: 0; padding-top: 4vw; padding-bottom: 4vw; } body#collection-577d16f6d2b8578b1b40b56b .mobile-bar-wrapper { background: #f1f2f3 !important; }
Remove Header
Entire Site
header#header { display: none; }
One Page
body#collection-577d16f6d2b8578b1b40b56b header#header { display: none; }
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 Underline Link when Hovering
footer#footer a:hover { text-decoration: none; }
Remove Footer
Entire Site
footer#footer { display: none !important; }
One Page
body#collection-58b5ed10bf629a356f09728a footer#footer { display: none !important; }
Featured Image: Squarespace.com