How to add a mobile menu icon?

Site URL: http://www.rebeccaheywood.uk

Hi there!

I was just wondering if at all possbible how i would change the menu icon so it is not text but a hamburger icon?

I am using the wells template.

17 hours ago, Rebeccaheywood said:

Site URL: http://www.rebeccaheywood.uk

Hi there!

I was just wondering if at all possbible how i would change the menu icon so it is not text but a hamburger icon?

I am using the wells template.

Add to Design > Custom CSS

/* Menu text to burger */
#mobileMenuLink ul>li.active-link {
    visibility: hidden;
}
#mobileMenuLink ul>li.active-link a:before {
    visibility: visible;
    content: "";
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxOHYxaC0yNHYtMWgyNHptMC02djFoLTI0di0xaDI0em0wLTZ2MWgtMjR2LTFoMjR6IiBmaWxsPSIjMTA0MGUyIi8+PHBhdGggZD0iTTI0IDE5aC0yNHYtMWgyNHYxem0wLTZoLTI0di0xaDI0djF6bTAtNmgtMjR2LTFoMjR2MXoiLz48L3N2Zz4=);
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 5px !important;
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    margin-top: 5px;
}
/* Burger to X icon */
.menu-open + div #mobileMenuLink ul>li.active-link a:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuOTU0IDIxLjAzbC05LjE4NC05LjA5NSA5LjA5Mi05LjE3NC0yLjgzMi0yLjgwNy05LjA5IDkuMTc5LTkuMTc2LTkuMDg4LTIuODEgMi44MSA5LjE4NiA5LjEwNS05LjA5NSA5LjE4NCAyLjgxIDIuODEgOS4xMTItOS4xOTIgOS4xOCA5LjF6Ii8+PC9zdmc+) !important;
    filter: invert(1);
}

On 5/1/2021 at 8:49 AM, tuanphan said:

Add to Design > Custom CSS

/* Menu text to burger */
#mobileMenuLink ul>li.active-link {
    visibility: hidden;
}
#mobileMenuLink ul>li.active-link a:before {
    visibility: visible;
    content: "";
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxOHYxaC0yNHYtMWgyNHptMC02djFoLTI0di0xaDI0em0wLTZ2MWgtMjR2LTFoMjR6IiBmaWxsPSIjMTA0MGUyIi8+PHBhdGggZD0iTTI0IDE5aC0yNHYtMWgyNHYxem0wLTZoLTI0di0xaDI0djF6bTAtNmgtMjR2LTFoMjR2MXoiLz48L3N2Zz4=);
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 5px !important;
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    margin-top: 5px;
}
/* Burger to X icon */
.menu-open + div #mobileMenuLink ul>li.active-link a:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuOTU0IDIxLjAzbC05LjE4NC05LjA5NSA5LjA5Mi05LjE3NC0yLjgzMi0yLjgwNy05LjA5IDkuMTc5LTkuMTc2LTkuMDg4LTIuODEgMi44MSA5LjE4NiA5LjEwNS05LjA5NSA5LjE4NCAyLjgxIDIuODEgOS4xMTItOS4xOTIgOS4xOCA5LjF6Ii8+PC9zdmc+) !important;
    filter: invert(1);
}

 

Thats worked thank you!