Burger Menu Icon CSS

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

Burger Icon To Word Menu 01 Min

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

Add Text Next To Burger 01 Min

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

Change Position Burger Menu 01 Min

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

Make Button Appears Next To Burger 01 Min