Header
Site Title Color
Entire Site
.site-title a {
color: #000 !important;
}
One Page
<style>
.site-title a {
color: #000 !important;
}
</style>
Site Title Size
Desktop
@media screen and (min-width:641px) {
.site-title a {
font-size: 20px;
}
}
Mobile
@media screen and (max-width:640px) {
.site-title a {
font-size: 20px;
}
}
One Page
<style>
.site-title a {
font-size: 20px;
}
</style>
Remove Site Title
Entire Site
.site-title a {
display: none !important;
}
One Page
<style>
.site-title a {
display: none !important;
}
</style>
Logo above Site Title
Entire Site
.site-title a:before {
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
One Page
<style>
.site-title a:before {
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
Change Padding between Site Title & Navigation
#title-area {
padding-top: 0;
}
div#innerWrapper {
margin-top: 0;
}
Navigation Hover Color
#main-navigation ul li a:hover {
color: #ff0000;
}
Navigation Items Bold
#main-navigation ul li a {
font-weight: bold;
}
Remove Navigation
Entire Site
nav#main-navigation {
display: none;
}
nav#mobile-navigation {
display: none;
}
One Page
<style>
nav#main-navigation {
display: none;
}
nav#mobile-navigation {
display: none;
}
</style>
Navigation Background Color
Entire Site
nav#main-navigation {
background: #ff0000;
}
One Page
<style>
nav#main-navigation {
background: #ff0000;
}
</style>
Navigation Background (Extend to top and either side)
Entire Site
nav#main-navigation {
top: -10px !important;
background: #f1f2f3;
width: 100% !important;
}
One Page
<style>
nav#main-navigation {
top: -10px !important;
background: #f1f2f3;
width: 100% !important;
}
</style>
Mobile Menu Background Color
Entire Site
nav#mobile-navigation {
background: #fff;
}
One Page
<style>
nav#mobile-navigation {
background: #fff;
}
</style>
Change word “Menu”
#mobile-navigation-label:after {
content: "New Menu" !important;
font-size: 20px;
color: #fff;
}
Align Navigation Items (Mobile)
#mobile-navigation.sqs-mobile-nav-open ul li {
text-align: left;
padding-left: 20px;
}
News
Remove Post Date
Blog List Page
.view-list .author-date {
display: none;
}
Single Post Page
.view-item .author-date {
display: none;
}
Disable Post Date Link
.view-list .author-date a {
pointer-events: none;
}
Remove Post Social Icon
.comment-share-like {
display: none;
}
.counts {
display: none;
}
Align Left Post Title
Blog List Page
.view-list article h1 {
text-align: left;
}
Single Post
.view-item article h1 {
text-align: left;
}
Decrease Space between Post Title & Site Title
All Posts
.collection-type-blog #innerWrapper #content {
padding-top: 0;
}
One Post
<style>
#innerWrapper #content {
padding-top: 0;
}
</style>
Other
Page Background Color
All Pages
div#outerWrapper {
background: #f1f2f3;
}
One Page
<style>
div#outerWrapper {
background: #f1f2f3;
}
</style>
Page Background Image
All Pages
div#outerWrapper {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
}
One Page
<style>
div#outerWrapper {
background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
background-repeat: no-repeat;
background-size: cover;
}
</style>
Change Links Color
Entire Site
a {
color: #000 !important;
}
One Page
<style>
a {
color: #000 !important;
}
</style>
Remove Underline on Footer Hyperlink
footer#footer a {
text-decoration: none;
border-bottom: none !important;
}
Remove Footer
Entire Site
footer#footer {
display: none;
}
One Page
<style>
footer#footer {
display: none;
}
</style>
Reduce Padding between Title & Body
Entire Site
section#content {
padding-top: 0 !important;
}
div#title-area {
padding-bottom: 0;
}
One Page
<style>
section#content {
padding-top: 0 !important;
}
div#title-area {
padding-bottom: 0;
}
</style>
This is SO helpful, thank you so much for putting this together and making it public. One question — On mobile navigation, I’m trying to change the the word, “Menu” to the three bar sandwich style menu. Do you have a code for that?
Hi. Can you share link to your site? I can check easier.
You can send to my email: https://beaverhero.com/covid19/
Comment notifications doesn’t work very well.