Pacific Template: Intertwine full-width imagery and splashy text in captivating, scrolling pages.

Notes

• Adding Custom CSS to Home > Design > Custom CSS
• Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
• With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
• Send me a message if you have any questions/the code doesn’t work (free).
• You can send a donation if this is helpful for you 😉

Header

Disable Logo Link

#logoImage a {
    pointer-events: none;
}

Remove Logo

Entire Site

h1#logoImage {
    visibility: hidden !important;
}

One Page

<style>
h1#logoImage {
    visibility: hidden !important;
}
</style>

Strike Navigation Hover Item

#headerNav a:hover {
    text-decoration: line-through;
}

Navigation Hover Item Color

#headerNav a:hover {
    color: #ff0000 !important;
}

Remove Navigation

Entire Site

div#headerNav {
    display: none !important;
}

One Page

<style>
div#headerNav {
    display: none !important;
}
</style>

Hide Navigation Items

First Item

nav#mainNavigation .index:nth-child(1) {
    visibility: hidden;
}

Second Item

nav#mainNavigation .index:nth-child(2) {
    visibility: hidden;
}

Do Similar!

Increase Logo Size

#logoImage img {
    max-width: 500px;
    width: 500px;
}

Remove Hamburger Icon

.mobile-nav-toggle-label {
    display: none;
}

Replace Hamburger Icon with word “Menu”

.mobile-nav-toggle-label {
    visibility: hidden;
}
.mobile-nav-toggle-label:after {
    visibility: visible;
    content: "Menu";
    color: #fff;
    font-size: 15px;
    font-family: Raleway;
}

Replace Hamburger Icon with Custom Image/Icon

.mobile-nav-toggle-label {
    visibility: hidden;
}
.mobile-nav-toggle-label:after {
    visibility: visible;
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    display: block;
}

Add word “Menu” beside Hamburger Icon

.mobile-nav-toggle-label:after {
    content: "Menu";
    font-size: 15px;
    color: #ff0000;
    position: absolute;
    left: 30px;
}

Hamburger Icon Color

.mobile-nav-toggle-label div {
    background: #ff0000 !important;
}

Navigation Overlay Color

div#overlayNav {
    background: #f1f2f3;
}

Decrease Padding Top Navigation Overlay

div#overlayNav {
    height: 50%;
}

Change “X” close Icon color

.mobile-nav-toggle-label div {
    background: #ff0000 !important;
}

Remove Header

Entire Site

header#header {
    display: none;
}

One Page

<style>
header#header {
    display: none;
}
</style>

Header Background Color on Sroll

.show-on-scroll {
    background: #f1f2f3;
}

Header Background Image

header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Footer

Footer Background Color

Entire Site

footer#footer {
    background: #f1f2f3;
}

One Page

<style>
footer#footer {
    background: #f1f2f3;
}
</style>

Footer Background Image

Entire Site

footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

One Page

<style>
footer#footer {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

Remove Footer

Entire Site

footer#footer {
    display: none !important;
}

One Page

<style>
footer#footer {
    display: none !important;
}
</style>

Featured Image: Squarespace.com