Header
Site Title Color
Entire Site
/* Desktop */
.Header-branding {
color: #ff0000 !important;
}
/* Mobile */
a.Mobile-bar-branding {
color: #ff0000 !important;
}
One Page
/* Desktop */
body#collection-58b5ed10bf629a356f09728a .Header-branding {
color: #ff0000 !important;
}
/* Mobile */
body#collection-58b5ed10bf629a356f09728a a.Mobile-bar-branding {
color: #ff0000 !important;
}
Remove Site Title
Entire Site
.Header-branding {
visibility: hidden;
}
a.Mobile-bar-branding {
visibility: hidden;
}
One Page
body#collection-58b5ed10bf629a356f09728a .Header-branding {
visibility: hidden;
}
body#collection-58b5ed10bf629a356f09728a a.Mobile-bar-branding {
visibility: hidden;
}
Navigation Strike Hover
.Header-nav-item:hover {
text-decoration: line-through;
}
Hide Navigation Items
First Item
.Header-nav-item:nth-child(1) {
display: none;
}
Second Item
.Header-nav-item:nth-child(1) {
display: none;
}
Do similar!
Turn Navigation Last item to Button
.Header-nav-item:last-child {
background: #fff;
color: #000 !important;
padding: 5px 10px !important;
border-radius: 50px;
font-size: 15px;
}
Remove Navigation
Entire Site
.Header-nav {
display: none;
}
One Page
body#collection-58b5ed10bf629a356f09728a .Header-nav {
display: none;
}
Remove Hamburger Icon
button.Mobile-bar-menu {
display: none;
}
Navigation Overlay Color
.Mobile-overlay-menu {
background: #f1f2f3;
}
Navigation Overlay Width
.Mobile-overlay-menu {
width: 50%;
}
Replace Hamburger Icon with word “Menu”
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "Menu";
font-family: proxima-nova;
color: #000;
font-size: 20px;
}
Replace Hamburger Icon with Custom Icon
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 30px;
height: 30px;
display: block;
}
Add word “Menu” beside Hamburger Icon
button.Mobile-bar-menu:before {
content: "Menu";
font-size: 20px;
color: #000;
position: absolute;
right: 50px;
top: 25px;
}
Change “X” close icon
.Mobile-overlay-close svg {
stroke: #000;
}
Site Title (Right) – Hamburger Icon (Left)
.Mobile-bar {
flex-direction: row-reverse;
}
[data-nc-base="mobile-bar"] [data-nc-container="top-center"] {
flex-grow: 1;
display: block !important;
}
[data-nc-base="mobile-bar"] [data-nc-container="top-left"] {
justify-content: flex-end;
}
[data-nc-base="mobile-bar"] [data-nc-container="top-right"] {
justify-content: flex-start;
}
Header Background Color
Entire Site
.Header.Header--bottom {
background: #f1f2f3;
}
.Mobile-bar {
background: #f1f2f3;
}
One Page
body#item-58a214273e00bea4494186a7 .Header.Header--bottom {
background: #f1f2f3;
}
body#item-58a214273e00bea4494186a7 .Mobile-bar {
background: #f1f2f3;
}
Remove Header
Entire Site
.Mobile-bar {
display: none;
}
.Header.Header--bottom {
display: none !important;
}
One Page
body#item-58a214273e00bea4494186a7 .Mobile-bar {
display: none;
}
body#item-58a214273e00bea4494186a7 .Header.Header--bottom {
display: none !important;
}
Footer
Footer Background Color
Entire Site
footer.Footer {
background: #000;
}
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer {
background: #000;
}
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
body#collection-58b5ed10bf629a356f09728a 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;
}
Remove Footer
Entire Site
footer.Footer {
display: none !important;
}
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer {
display: none !important;
}
Blog
Remove Post Featured Image
.BlogList-item-image {
display: none !important;
}
Remove Post Date
time.Blog-meta-item.Blog-meta-item--date {
display: none;
}
Remove Post Title
a.BlogList-item-title {
display: none !important;
}
Remove Post Excerpt
.BlogList-item-excerpt p {
display: none;
}
Remove Read More
a.BlogList-item-readmore {
display: none !important;
}
Change “Read More” text
.BlogList-item-readmore span {
visibility: hidden;
}
.BlogList-item-readmore span:after {
visibility: visible;
}
.BlogList-item-readmore span:before {
visibility: visible;
content: "View Detail";
margin-right: -100px;
}
Change Post Date Format
time.Blog-meta-item.Blog-meta-item--date {
visibility: hidden;
}
time.Blog-meta-item.Blog-meta-item--date:after {
content: attr(datetime);
visibility: visible;
text-align: center;
display: block;
}
Remove Post Social Share Icons
.BlogItem-share {
display: none;
}
Remove “Previous/Next” text
.BlogItem-pagination-link-content div {
color: #ff0000;
}
Page
Page Background Color
Entire Site
.Main {
background: #000;
}
One Page
body#collection-58b5ed10bf629a356f09728a .Main {
background: #000;
}
Page Background Image
Entire Site
.Main {
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-58b5ed10bf629a356f09728a .Main {
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;
}