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….