Header
Disable Logo Link
#logoImage a {
pointer-events: none;
}
Remove Logo
Entire Site
h1#logoImage {
visibility: hidden !important;
}
One Page
<style>
h1#logoImage {
visibility: hidden !important;
}
</style>
Strike Navigation Hover Item
#headerNav a:hover {
text-decoration: line-through;
}
Navigation Hover Item Color
#headerNav a:hover {
color: #ff0000 !important;
}
Remove Navigation
Entire Site
div#headerNav {
display: none !important;
}
One Page
<style>
div#headerNav {
display: none !important;
}
</style>
Hide Navigation Items
First Item
nav#mainNavigation .index:nth-child(1) {
visibility: hidden;
}
Second Item
nav#mainNavigation .index:nth-child(2) {
visibility: hidden;
}
Do Similar!
Increase Logo Size
#logoImage img {
max-width: 500px;
width: 500px;
}
Remove Hamburger Icon
.mobile-nav-toggle-label {
display: none;
}
Replace Hamburger Icon with word “Menu”
.mobile-nav-toggle-label {
visibility: hidden;
}
.mobile-nav-toggle-label:after {
visibility: visible;
content: "Menu";
color: #fff;
font-size: 15px;
font-family: Raleway;
}
Replace Hamburger Icon with Custom Image/Icon
.mobile-nav-toggle-label {
visibility: hidden;
}
.mobile-nav-toggle-label:after {
visibility: visible;
content: "";
background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: block;
}
Add word “Menu” beside Hamburger Icon
.mobile-nav-toggle-label:after {
content: "Menu";
font-size: 15px;
color: #ff0000;
position: absolute;
left: 30px;
}
Hamburger Icon Color
.mobile-nav-toggle-label div {
background: #ff0000 !important;
}
Navigation Overlay Color
div#overlayNav {
background: #f1f2f3;
}
Decrease Padding Top Navigation Overlay
div#overlayNav {
height: 50%;
}
Change “X” close Icon color
.mobile-nav-toggle-label div {
background: #ff0000 !important;
}
Remove Header
Entire Site
header#header {
display: none;
}
One Page
<style>
header#header {
display: none;
}
</style>
Header Background Color on Sroll
.show-on-scroll {
background: #f1f2f3;
}
Header Background Image
header#header {
background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Footer
Footer Background Color
Entire Site
footer#footer {
background: #f1f2f3;
}
One Page
<style>
footer#footer {
background: #f1f2f3;
}
</style>
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
<style>
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;
}
</style>
Remove Footer
Entire Site
footer#footer {
display: none !important;
}
One Page
<style>
footer#footer {
display: none !important;
}
</style>
Can I please get the CSS class or ID for the Pacific/Fulton Gallery Block, and specifically the Title and Description copy/caption or a link to documentation for all Class/ID descriptors for Pacific. Thanks in advance!! ~Dani
Hi Dani. If you share site url, i can take a look.
Me and another Circle member are writing CSS Class/ID for all templates, but it will probably take 2-3 weeks to complete. If you are interested, please let me know, I will send it once completed.