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;
}