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
Hide Footer and Footer
/* Hide Header */ .mobile-nav-toggle-label { display: none; } /* Hide Footer */ footer#footer { display: none; }
Make Navigation Sticky on the top right side of the screen on the mobile
.mobile-nav-toggle-label { right: 20px; left: initial; }
Change Color Of 3 Lines in Nav Bar
/* Change color of all 3 lines */ .mobile-nav-toggle-label div { background-color: #ff0000 !important; } /* Change color of first line */ .mobile-nav-toggle-label .top-bar { background-color: green; } /* Change color of second line */ .mobile-nav-toggle-label .middle-bar { background-color: red; } /* Change color of last line */ .mobile-nav-toggle-label .bottom-bar { background-color: violet; }
Padding on Navigation Items
#overlayNav #mobileNavWrapper nav div a { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 30px; }
Hide Site Title
h1#siteTitle { display: none; }
Change navigation color on just one page
First, you need to find Page ID.
Then use CSS
body#collection-54073e29e4b0cb374f505a06 #mobileNavWrapper a { color: green; }
Hide Nav
.mobile-nav-toggle-label { display: none; }
Change burger to Normal Navigation on Desktop
@media screen and (min-width:992px) { /* hide burger */ .mobile-nav-toggle-label { display: none; } /* Show normal menu */ div#headerNav { display: flex !important; } /* logo left menu right */ .header-inner { display: flex; justify-content: space-between; align-items: center; } div#logoWrapper { left: 0 !important; transform: unset !important; } div#headerNav { display: flex !important; width: 75% !important; } div#mainNavWrapper { width: 100%; } nav#mainNavigation { display: flex; justify-content: flex-end; } /* space between nav items */ nav#mainNavigation>div { margin-right: 1.5vw; } /* Nav items color */ nav#mainNavigation * { color: #db1a5d !important; } }
Change navigation bar colour on scroll
/* Change background color */ label.mobile-nav-toggle-label.show-on-scroll-mobile { background-color: green !important; } /* Change 3 lines color */ label.mobile-nav-toggle-label.show-on-scroll-mobile div { background-color: red; }
Change colour on dropdown menu
/* background overlay color */ div#overlayNav { background: green; } /* Change menu color */ div#mobileNavWrapper a { color: red !important; }
How to align the Site Title to the left and navigation to the right
div#siteTitleWrapper { left: 10% !important; } label.mobile-nav-toggle-label { left: unset; right: 30px; }
How can I align Navigation Links?
#overlayNav #mobileNavWrapper nav div { text-align: left; }
Writing Menu next to the menu icon
.mobile-nav-toggle-label:before { content: "Menu"; display: inline-block; width: 70px; }
Reduce the space above and below my nav bar?
#overlayNav #mobileNavWrapper { padding-top: 5px; padding-bottom: 5px; }
Force hamburger Nav to text in mobile view?
@media only screen and (max-width:768px) { .mobile-nav-toggle-label { visibility: hidden; } .mobile-nav-toggle-label:after { content: "Menu"; visibility: visible; } }
Footer
Change footer spacing
.footer-inner { padding-top: 10px; padding-bottom: 5px; padding-left: 20px; padding-left: 10px; }
Homepage
Align text on left center of banner
#intro-fulton-section h1 { text-align: left; }
Change the site background colour of index page
body.homepage #page { background-color: violet; }
Other
Remove blog post date
.entry-dateline { display: none; }
How do i left align text on a image (poster) overlay
.product-overlay .product-title { text-align: left !important; } .product-overlay .product-price { text-align: left !important; }
Remove title, header from a page
First, you need to find Page ID.
Then use CSS
/* Remove Site Title */ body#collection-54073e34e4b03d3eb8662de5 #siteTitle { display: none; } /* Remove Header */ body#collection-54073e34e4b03d3eb8662de5 #header { display: none; }
Updating….
Featured Imaged: Squarespace