Header
Site Title Color
Entire Site
/* Desktop */
.Header-branding {
color: #ff0000 !important;
}
/* Mobile */
a.Mobile-bar-branding {
color: #ff0000 !important;
}
One Page
/* Desktop */
body#item-57d70dec579fb30c254cdc63 .Header-branding {
color: #ff0000 !important;
}
/* Mobile */
body#item-57d70dec579fb30c254cdc63 a.Mobile-bar-branding {
color: #ff0000 !important;
}
Disable Site Title Link
Entire Site
/* Mobile */
a.Mobile-bar-branding {
pointer-events: none;
}
/* Desktop */
.Header-branding {
pointer-events: none;
}
One Page
/* Mobile */
body#collection-57d6c581f5e23170b59ec7e3 a.Mobile-bar-branding {
pointer-events: none;
}
/* Desktop */
body#collection-57d6c581f5e23170b59ec7e3 .Header-branding {
pointer-events: none;
}
Remove Site Title
Entire Site
/* Desktop */
.Header-branding {
display: none;
}
/* Mobile */
a.Mobile-bar-branding {
display: none;
}
One Page
/* Desktop */
body#collection-57d6c581f5e23170b59ec7e3 .Header-branding {
display: none;
}
/* Mobile */
body#collection-57d6c581f5e23170b59ec7e3 a.Mobile-bar-branding {
display: none;
}
Navigation Hover Color
.Header-nav-item:hover {
color: #ff0000 !important;
}
Strike Navigation Hover Link
.Header-nav-item:hover {
text-decoration: line-through;
}
Hide Navigation Item
.Header-nav--primary .Header-nav-item:nth-child(1) {
display: none;
}
Remove Navigation
Entire Site
.Header-nav {
display: none;
}
One Page
body#collection-57d6c5c26a496393e741e6fb .Header-nav {
display: none;
}
Site Title (Right) – Navigation (Left)
.Header-inner.Header-inner--top {
flex-direction: row-reverse;
}
Site Title (Right) – Hamburger Menu (Left)
.Mobile-bar.Mobile-bar--top {
flex-direction: row-reverse;
}
Replace Hamburger Icon with word “Menu”
button.Mobile-bar-menu {
visibility: hidden;
}
button.Mobile-bar-menu:after {
visibility: visible;
content: "Menu";
color: #ff0000;
font-size: 20px;
}
Replace Hamburger Icon with Custom Icon/Image
button.Mobile-bar-menu:after {
content: "";
visibility: visible;
display: block;
background-image: url(https://secure.gravatar.com/avatar/0f97e32…?s=26&d=monsterid&r=g);
background-repeat: no-repeat;
background-size: contain;
width: 30px;
height: 30px;
}
button.Mobile-bar-menu {
visibility: hidden;
}
Change Hamburger Icon Color
button.Mobile-bar-menu {
stroke: red;
}
Force Mobile Header on Desktop
[data-nc-base="mobile-bar"] {
display: block;
}
.Header.Header--top {
display: none !important;
}
Navigation Overlay Color
.Mobile-overlay-menu {
background: #000;
}
.Mobile-overlay {
background: #000 !important;
}
button.Mobile-overlay-close {
background: #000 !important;
}
Navigation Overlay Width
.Mobile-overlay {
width: 50%;
}
Align Navigation Overlay Items
a.Mobile-overlay-nav-item {
text-align: center;
}
Change Dropdown Menu Color
span.Header-nav-folder {
background: #000 !important;
}
Header Background Color
Entire Site
/* Desktop */
.Header-inner.Header-inner--top {
background: red;
}
/* Mobile */
.Mobile-bar.Mobile-bar--top {
background: red;
}
One Page
/* Desktop */
body#collection-57d6c5c26a496393e741e6fb .Header-inner.Header-inner--top {
background: red;
}
/* Mobile */
body#collection-57d6c5c26a496393e741e6fb .Mobile-bar.Mobile-bar--top {
background: red;
}
Fixed Header
.Header-inner.Header-inner--top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.Site-inner {
margin-top: 100px;
}
Remove Header
Entire Site
/* Desktop */
header.Header.Header--top {
display: none !important;
}
/* Mobile */
.Mobile-bar.Mobile-bar--top {
display: none;
}
One Page
/* Desktop */
body#collection-57d6c5c26a496393e741e6fb header.Header.Header--top {
display: none !important;
}
/* Mobile */
body#collection-57d6c5c26a496393e741e6fb .Mobile-bar.Mobile-bar--top {
display: none;
}
Footer
Footer Background Color
Entire Site
footer.Footer {
background: #f1f2f3;
}
One Page
body#collection-57d6c5c26a496393e741e6fb footer.Footer {
background: #f1f2f3;
}
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: repeat-x;
background-size: contain;
background-position: center center;
background-attachment: fixed;
}
One Page
body#collection-57d6c5c26a496393e741e6fb footer.Footer {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: repeat-x;
background-size: contain;
background-position: center center;
background-attachment: fixed;
}
Blog Page – Blog Posts
Remove Post Date
All Blog Posts
time.Blog-meta-item.Blog-meta-item--date {
display: none;
}
One Post
body#collection-57d6c5c26a496393e741e6fb time.Blog-meta-item.Blog-meta-item--date {
display: none;
}
Remove Post Featured Image
.BlogList-item-image {
display: none !important;
}
Align Center Post Date/Post Title
Blog List Page
.BlogList-item-title {
text-align: center !important;
}
.Blog-meta.BlogList-item-meta {
display: block;
text-align: center;
}
Change Post Title Color
All Posts
h1.BlogItem-title {
color: #ff0000;
}
One Post
body#item-57d97350bebafb90d6132831 h1.BlogItem-title {
color: #ff0000;
}
Change “Previous” & “Next” Color
.BlogItem-pagination-link-label {
color: red;
}
Change Comment Button Style
.comment-btn {
background: #ff0000 !important;
color: #000 !important;
border-radius: 50px !important;
font-size: 20px !important;
}
Decrease space between Header & Post
.view-item.collection-type-blog .Main-content {
padding-top: 0;
}
Change Read More text
a.BlogList-item-readmore {
visibility: hidden;
}
a.BlogList-item-readmore:before {
content: "new read more";
visibility: visible;
}
Hide Post Title
Blog Page – Categories Page
.BlogList-item-title {
display: none !important;
}
All Blog Posts
.view-item.collection-type-blog h1.BlogItem-title {
display: none;
}
One Blog Post
body#item-57d70dec579fb30c254cdc63 h1.BlogItem-title {
display: none;
}
Blog List Title Font
a.BlogList-item-title {
font-family: tuan;
}
with tuan is custom font name
Post Pagination Font
nav.BlogItem-pagination * {
font-family: monospace !important;
}
Rename Pagination Previous/Next
/* Prev */
a.BlogItem-pagination-link--prev .BlogItem-pagination-link-label {
visibility: hidden;
}
a.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
visibility: visible;
content: "New prev";
}
/* next */
a.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
visibility: hidden;
}
a.BlogItem-pagination-link--next .BlogItem-pagination-link-label:after {
content: "New next";
visibility: visible;
}
Other
Page Background Color
Entire Site
.Main {
background: #f1f2f3;
}
One Page
body#item-57d97350bebafb90d6132831 .Main {
background: #f1f2f3;
}
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#item-57d97350bebafb90d6132831 .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;
}
(Mobile) Change Gallery black “Dot” to text
a.sqs-lightbox-meta-trigger {
width: 100% !important;
visibility: hidden;
}
a.sqs-lightbox-meta-trigger:before {
content: "See info";
visibility: visible;
}
I’m using the Rally template, is there a custom ccs for hover text to show up on mobile for a grid gallery specifically? Thank you!
Sent to your email. Please check.