Go Theme menu icon

Hey @sunskey,

Thanks for reaching out!

In the current version of Go, it isn’t possible to change the menu icon, neither can the icon be changed through CSS.

However, it can be changed using some custom JavaScript code.

First, you’d have to install a custom JS code plugin, like this one: https://www.ads-software.com/plugins/custom-css-js/

Then, go to “Add custom JS”, and paste the following code:

var button = document.querySelector("#nav-toggle > div:nth-child(1)");
button.innerHTML = "<span class='dashicons dashicons-menu-alt3'></span>";

Before publishing, under “Where on page” on the right-hand side, make sure to check “Footer”.

After publishing, the “dots” icon should have changed to the “bars” icon, as so: https://prnt.sc/ufordj

Please let me know if this works for you!

Thank you @gdalex for your quick reply and help.
Javascript being out of my domain of comprehension in code and having pretty much done my site, I won’t be messing with it. I hope it will be useful to anyone who comes across this post, as it seems it is the only way to change the menu icon.
Thank you again for your time and help to the community, and good day to you!

I had a similar issue as @sunskey and felt lucky to find this thread as I went through countless efforts to change the toggle icon. Thanks @gdalex for the suggestion. I had never worked with javascript before but with the plugin and the code provided it actually worked! The only issue, and unfortunately it’s a big one, is the icon doesn’t appear on mobile, so I had to remove the code. It appears on desktop when I reduce the window size, so it appears to be responsive but on my phone, it disappears. If I tap the area where its supposed to be the menu open up, but the actual icon is gone ??

Any idea how to fix this? Thanks in advance for your help!

Hey there @sublimestudio,
I actually found a piece of code which you can add in your “additional css” section of the theme, accessible through Theme-> Customsize -> additional css (should be the last option at the end) and you’ll get a css box where you can put the following:

#header__search-toggle{
display:none;
}
Which should simply deactivate it and remove the hit box for it. The type of header display you’ve selected might have an impact on the result, I am not a 100% certain that it works with every single one, but it works on both mobile and pc for me. It doesn’t hide the responsive menu for mobile too, so that’s a +
Hope it helps, let me know if not
Have a good day,
sunskey

• This reply was modified 4 years, 1 month ago by sunskey.

Hello, I have accomplished the task.
Step 1) Download the Plugin mentioned by @gdalex
Step 2) Add the following Custom JS through the Plugin

let button = document.querySelector(".nav-toggle");
button.innerHTML = '<div class="box"><div class="line"></div><div class="line"></div><div class="line"></div></div>';

Step 3) Add the following Custom CSS through the Plugin

.box {
            background-color: rgb(19, 16, 12);
            width:40px;
            height:40px;
            display: flex;
            flex-direction: column;
            justify-content:space-evenly;
            align-items: center;
            border-radius: 10px;
}
        .line {
            background-color: rgb(255, 253, 253);
            width: 50%;
            height: 3px;
            border-radius: 5px;
}

Note: Make sure that you have selected Footer on the ‘Where on page’ option.
Finally you can edit the Hamburger design by editing the above CSS

• This reply was modified 3 years, 10 months ago by kaifahmad111.