Header
Site Title Color
Entire Site
/* Desktop */
.Header-branding {
color: #000 !important;
}
/* Mobile */
a.Mobile-bar-branding {
color: #000 !important;
}
One Page
/* Desktop */
body#collection-57d6c77c2994cab476ea1c26 .Header-branding {
color: #000 !important;
}
/* Mobile */
body#collection-57d6c77c2994cab476ea1c26 a.Mobile-bar-branding {
color: #000 !important;
}
Disable Site Title Link
Entire Site
.Header-branding {
pointer-events: none;
}
One Page
body#collection-57d6c77c2994cab476ea1c26 .Header-branding {
pointer-events: none;
}
Remove Site Title
Entire Site
.Header-branding {
display: none;
}
a.Mobile-bar-branding {
display: none;
}
One Page
body#collection-57d6c77c2994cab476ea1c26 .Header-branding {
display: none;
}
body#collection-57d6c77c2994cab476ea1c26 a.Mobile-bar-branding {
display: none;
}
Remove Header Navigation
Entire Site
.Header-nav {
display: none;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 .Header-nav {
display: none;
}
Site Title (Right) – Navigation (Left)
.Header-inner {
flex-direction: row-reverse;
}
Site Title (Top) – Navigation (Bottom)
Entire Site
.Header-inner {
flex-direction: column;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 .Header-inner {
flex-direction: column;
}
Header Background Color
Entire Site
/* Mobile */
.Mobile-bar.Mobile-bar--top {
background: #000;
}
/* Desktop */
header.Header.Header--bottom {
background: #000;
}
One Page
/* Mobile */
body#collection-5798fd31e4fcb5ab0c665dc7 .Mobile-bar.Mobile-bar--top {
background: #000;
}
/* Desktop */
body#collection-5798fd31e4fcb5ab0c665dc7 header.Header.Header--bottom {
background: #000;
}
Fixed Header
Entire Site
@media screen and (min-width:640px) {
/* Desktop */
header.Header.Header--bottom {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding-bottom: 30px;
}
/* Remove Overlap Content */
.Content-outer {
margin-top: 90px;
}
}
/* Mobile */
.Mobile-bar.Mobile-bar--top {
position: fixed;
top: 0;
z-index: 999;
left: 0;
right: 0;
}
One Page
@media screen and (min-width:640px) {
/* Desktop */
body#collection-5798fd31e4fcb5ab0c665dc7 header.Header.Header--bottom {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding-bottom: 30px;
}
/* Remove Overlap Content */
body#collection-5798fd31e4fcb5ab0c665dc7 .Content-outer {
margin-top: 90px;
}
}
/* Mobile */
body#collection-5798fd31e4fcb5ab0c665dc7 .Mobile-bar.Mobile-bar--top {
position: fixed;
top: 0;
z-index: 999;
left: 0;
right: 0;
}
Remove Header
Entire Site
[data-nc-base="mobile-bar"] {
display: none !important;
}
.Header.Header--bottom {
display: none !important;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 [data-nc-base="mobile-bar"] {
display: none !important;
}
body#collection-5798fd31e4fcb5ab0c665dc7 .Header.Header--bottom {
display: none !important;
}
Navigation Overlay Color
.Mobile-overlay-menu {
background: #f1f2f3;
}
Navigation Overlay Width
.Mobile-overlay {
width: 50%;
}
Force Mobile Header on Desktop
Entire Site
@media screen and (min-width:640px) {
[data-nc-base="mobile-bar"] {
display: flex;
}
.Header.Header--bottom {
display: none !important;
}
}
One Page
@media screen and (min-width:640px) {
body#collection-5798fd31e4fcb5ab0c665dc7 [data-nc-base="mobile-bar"] {
display: flex;
}
body#collection-5798fd31e4fcb5ab0c665dc7 .Header.Header--bottom {
display: none !important;
}
}
Replace Hamburger Icon with Image
Entire Site
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "";
display: block;
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
width: 30px;
height: 30px;
margin-top: -25px;
background-size: contain;
background-position: center center;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu {
visibility: hidden;
}
body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu:after {
visibility: visible;
content: "";
display: block;
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
width: 30px;
height: 30px;
margin-top: -25px;
background-size: contain;
background-position: center center;
}
Site Title (Right) – Hamburger Icon (Left)
.Mobile-bar.Mobile-bar--top {
flex-direction: row-reverse;
}
Add word “Menu” beside Hamburger Icon
Entire Site
button.Mobile-bar-menu:after {
content: "Menu";
color: #fff;
position: absolute;
right: 50px;
top: 30px;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu:after {
content: "Menu";
color: #fff;
position: absolute;
right: 50px;
top: 30px;
}
Footer
Footer Background Color
Entire Site
footer.Footer {
background: #f2f5f7;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer {
background: #f2f5f7;
}
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-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
Subscribe Button Style
.newsletter-form-button {
background: #000 !important;
color: #fff !important;
border-radius: 20px !important;
}
Remove Footer
Entire Site
footer.Footer {
display: none !important;
}
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer {
display: none !important;
}
Blog Page – Blog Posts
Remove Post Date
time.Blog-meta-item.Blog-meta-item--date {
display: none;
}
Remove Post Excerpt
.BlogList-item-excerpt {
display: none !important;
}
Remove Post Author
.Blog-meta-item--author {
display: none !important;
}
Remove Read More
.BlogList-item-readmore {
display: none !important;
}
Turn Read More to Button
.BlogList-item-readmore span {
display: block;
background: #000;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
max-width: 100px;
text-align: center;
}
Remove –> symbol in Read More
.BlogList-item-readmore span:after {
display: none;
}
Remove Post Social Share
All Blog Posts
.BlogItem-share {
display: none;
}
Specific Blog Post
body#item-581bb4135016e1a8a7aded1c .BlogItem-share {
display: none;
}
Other
Page Background Color
Entire Site
.Main.Main--page {
background: #f1f2f3;
}
One Page
body#collection-57b22f9044024312ebcd79b5 .Main.Main--page {
background: #f1f2f3;
}
Page Background Image
Entire Site
.Main.Main--page {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
One Page
body#collection-57b22f9044024312ebcd79b5 .Main.Main--page {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}