Remove Burger (One Page)
Add this code to Page Header Code Injection and click Save
(If your site doesn’t support Code Injection, you can add code via Code Block)
<!-- Remove burger (One Page) -->
<style>
.header-burger {
display: none;
}
</style>
Burger Color (One Page)
Add this code to Page Header Code Injection and click Save
(If your site doesn’t support Code Injection, you can add code via Code Block)
<!-- burger color on one page -->
<style>
/* Change burger color */
.burger-inner>div {
background-color: #f1f !important;
}
/* change burger X color */
body.header--menu-open .burger-inner>div {
background-color: #f1f !important;
}
</style>
Add these codes to CSS Custom Box and click Save.
Burger Color
/* Change burger color */
.burger-inner>div {
background-color: #f1f !important;
}
Burger X Color
/* change burger X color */
body.header--menu-open .burger-inner>div {
background-color: #f1f !important;
}
Burger Icon to word “Menu”
/* Change burger icon to word Menu */
/* burger icon to Menu */
.burger-box:after {
content: "MENU";
width: 60px;
height: 40px;
display: block;
color: #000;
font-size: 20px;
font-weight: bold;
visibility: visible;
margin-top: auto !important;
margin-bottom: auto !important
}
.burger-box div {
display: none
}
And you will have
Add text next to Burger
/* Add text next to burger */
div.header-burger:before {
content: "Menu";
position: relative;
top: -10px;
font-size: 18px;
}
And you will have
Change position of Logo – Burger
/* Change position of burger - logo */
div.header-display-mobile {
flex-direction: row-reverse;
}
.header-title-text {
text-align: right;
}
And you will have
Make button appear next to Burger
/* Make button appear next to burger */
@media screen and (max-width:991px) {
.header-actions.header-actions--right, .header-actions-action.header-actions-action--cta {
display: flex !important;
}
.header-title-nav-wrapper {
flex: 1 0 30% !important;
}
a.btn {
padding-left: 10px !important;
padding-right: 10px !important;
font-size: 14px !important;
}
}
And you will have
