Header
Site Title Custom Font
@font-face {
font-family: fontname;
src: url(https://static1.squarespace.com/static/5d2b34d977f80900014edb0d/t/5e3f7cb899dd6e23d8b1e836/1581219002767/nexa-regular.otf);
}
/* Desktop */
div#site-title-wrapper h1#site-title a{
font-family: fontname;
}
/* mobile */
nav#mobile-navigation span#mobile-navigation-title a{
font-family: fontname;
}
Remove Site Title
Entire Site
h1#site-title a {
visibility: hidden;
}
span#mobile-navigation-title a {
visibility: hidden;
}
One Page
body#collection-58b5ed10bf629a356f09728a h1#site-title a {
visibility: hidden;
}
body#collection-58b5ed10bf629a356f09728a span#mobile-navigation-title a {
visibility: hidden;
}
Navigation Hover Color
nav#main-navigation a:hover {
color: #ff0000 !important;
}
Remove Navigation
Entire Site
nav#main-navigation {
display: none;
}
One Page
body#collection-58b5ed10bf629a356f09728a nav#main-navigation {
display: none;
}
Navigation Drop-down Color
.subnav>ul {
background: #f1f2f3 !important;
}
Change Hamburger Icon Color
span#mobile-navigation-label {
color: #ff0000 !important;
}
Replace Hamburger Icon with word “Menu”
#mobile-navigation-label:before {
content: "Menu";
color: #000;
font-size: 15px;
font-family: "proxima-nova";
}
Replace Hamburger Icon with Custom Icon
#mobile-navigation-label:before {
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: 20px;
height: 20px;
}
Mobile Navigation Background
#mobile-navigation>ul {
background: #f1f2f3;
}
Align Mobile Navigation Items
#mobile-navigation>ul>li {
text-align: left;
padding-left: 20px;
}
Header Background Color
Entire Site
nav#mobile-navigation {
background: #f1f2f3;
}
div#navigation-top {
background: #f1f2f3;
}
One Page
body#item-58a214273e00bea4494186a7 nav#mobile-navigation {
background: #f1f2f3;
}
body#item-58a214273e00bea4494186a7 div#navigation-top {
background: #f1f2f3;
}
Header Background Image
div#navigation-top {
background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
background-size: cover;
}
Left Menu – Logo – Right Menu
Add to Settings > Advanced > Code Injection > Header
<script>
jQuery(document).ready(function($){
$('div#site-title-wrapper').insertAfter('.horizontal-navigation-bar nav>ul>li:nth-child(4)');
})
</script>
<style>
div#site-title-wrapper:nth-child(n+6) {
display: none !important;
}
body.canvas-setting-site-width .horizontal-navigation-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
</style>
Remove Header
Entire Site
div#navigation-top {
display: none;
}
nav#mobile-navigation {
display: none !important;
}
One Page
body#item-58a214273e00bea4494186a7 nav#mobile-navigation {
display: none;
}
body#item-58a214273e00bea4494186a7 div#navigation-top {
display: none !important;
}
Footer
Footer Background Color
Entire Site
div#page-footer-wrapper {
background: #000;
}
One Page
body#collection-58b5ed10bf629a356f09728a div#page-footer-wrapper {
background: #000;
}
Footer Background Image
Entire Site
div#page-footer-wrapper {
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 div#page-footer-wrapperr {
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
div#page-footer-wrapper {
display: none !important;
}
One Page
body#collection-58b5ed10bf629a356f09728a div#page-footer-wrapper {
display: none !important;
}
Blog
Remove Post Date
time.published {
display: none;
}
Remove Post Author
.author {
display: none;
}
Remove Post Tags
.tags {
display: none;
}
Remove Post Categories
.categories {
display: none;
}
Remove Post Social Share Icons
.ss-social-button-wrapper {
display: none;
}
Sticky Sidebar when Scrolling
div#sidebar-one-wrapper {
position: -webkit-sticky;
position: sticky;
top: 10px;
}
Other
Align Left Page Title
All Pages
h1#page-title {
text-align: left;
}
One Page
body#collection-56cb3f0d2b8dde4bd7a65d0e h1#page-title {
text-align: left;
}
Decrease Page Banner Height
All Pages
div#banner-area {
padding-top: 20px;
padding-bottom: 20px;
}
One Page
body#collection-56cb3f0d2b8dde4bd7a65d0e div#banner-area {
padding-top: 20px;
padding-bottom: 20px;
}
Hi Tuan,
What code should I use to split the navigation so that the logo is in the center and the navigation is on either side of the logo? I am using the Five Template.
Thanks!
Sent to your email.
Hi Tuan!
The Five template automatically hides the page description on mobile, and I can’t figure out how to override that on my homepage. Can you help? Thank you!
Add to Design > custom CSS
/* show page description mobile */
@media screen and (max-width:640px) {
body.homepage {
div#page-description {
display: block !important;
}
div#banner-area {
margin-left: 0 !important;
}
div#banner-area p {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
}}
That worked perfectly! Thank you so much!