Mojave Template: Scrolling effects, striking typography, and calls-to-action draw people to your cause.
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
Header Background Color
.Header { background-color: #ff0000; }
Header Background Color (Specific Page)
First, you need to find Page ID.
Then, use
body#collection-56e070e59f726659e9f1d3fb .Header { background-color: #ff0000; }
Sticky Header (Desktop/Tablet)
.Header { position: fixed; left: 0; right: 0; z-index: 999; }
Sticky Announcement Bar
.sqs-announcement-bar-dropzone { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } .Header { position: fixed; left: 0; right: 0; z-index: 999; top: 40px; }
Force the Hamburger Nav for All Devices
[data-nc-base="mobile-bar"] { display: block; } .Header { display: none !important; }
Turn Final Nav item into a button
.Header-nav-item:last-child { background: #000; color: #fff !important; padding: 10px 20px !important; font-size: 15px; border-radius: 20px; }
Vertical Line Dividers between Primary Navigation links
.Header-nav a { border-right: 1px solid #000; padding-right: 5px !important; padding-top: 1px; padding-bottom: 1px; } .Header-nav a:last-child { border: none; }
Scale the Heading 1 font for mobile
@media screen and (max-width:640px) { h1 { font-size: 20px !important; } }
Change Header Navigation Font
.Header-nav-item { font-family: font-name !important; }
Turn off click on navigation
.Header-nav-inner a { pointer-events: none; }
Underline Active Links on Navigation
.Header-nav-item--active { text-decoration: underline; }
Turn off click on Navigation Active Links
.Header-nav-item--active { pointer-events: none; }
Remove Header (One Page)
First, you need to find Page ID.
Then, use
body#collection-56e070e59f726659e9f1d3fb .Header { display: none; }
Other
Background Color (One Page)
First, you need to find Page ID.
Then, use
body#collection-56e070e59f726659e9f1d3fb { background-color: #ff0000 !important; }