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