Can you add an option to change the hamburger menu icon?

Hello,

We will look into this for you. Twenty Twenty has some built in SVG icons and if there isn’t a suitable icon we will use the WordPress built in Dashicons.

An option to choose a background colour for the icon shouldn’t be a problem either.

Oliver

That’s great. Thank you so much for the super fast reply and fix.

I also think the transparency might not be working for the top header. If I have a div with an image and move it up with a minus margin it is under the white menu. I’m not sure if this is the image being hidden yet though. I’ll check and file a proper bug report if it is this plugin though.

No problem. I am now in lock down with my children so will be working on this for you when they’ve gone to bed ??

Let me know when you’ve investigated the header transparency issue and if it’s something I need to sort out.

Thank you,

Oliver

OK so I’ve just pushed an update.

If you go to “Customizer – Nav Options – Use Hamburger Dashicon” you will be able to change the ellipses icon to a hamburger icon as requested.

Let me know what you think.

Oliver

Thank you so much for that. I don’t think I’ve ever seen an update pushed out this fast before.

I had to change this .nav-toggle .toggle-inner{padding-top:0} to get the hamburger icon to center properly.

I was able to get a nice colored hamburger with this code in customize.

.dashicons{background-color:#394999;color:white}
.nav-toggle .toggle-inner{padding-top:0}

I guess there need to be 5 settings in the future there.

toggle background color:
toggle color:
toggle size:
toggle padding:
toggle margin:
——————————————–

I tried removing the white from the header’s CSS but it still didn’t turn transparent for some reason and the header width is a bit crazy too. It would be great if you could look at those bits of code. Maybe somethings just aren’t linking up properly.

Thanks, we don’t mess about ??

OK, unless I hear more people wanting to change the background colour of the icon I think we’ll leave that for now (and assume you’re happy to have changed that with your CSS).

The size I think may need to change but once a visibly appealing size has been chosen I there shouldn’t be a need for an option for this (same with the padding etc). There’s a threshold where too many un-necessary options start to make the plugin too bulky.

So I shall be looking at the padding and size for the next update.

You mention “removing the white from the headers” and “header width is a bit crazy”. Can you please explain exactly what you mean with this? Maybe show screen grabs to explain what the problem is?

Thank you,

Oliver

I just figured this one out.

#site-content {
    overflow: hidden;
}

The overflow has to be shown when transparency is turned on otherwise nothing from the content area can show up in the transparent area.

The dash icon is 20×20 now which is a bit small but almost perfect. I think Google says buttons should be 48 pixels.

https://developers.google.com/web/fundamentals/accessibility/accessible-styles

“A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport. For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. Sep 3, 2019”

Currently, the overflow of the #site-content div is cut off and hidden so it can never show in the transparent area.
https://a4jp.com/0/bugs/2020-03-24-09-23-pm-001.png

After fixing the overflow, everything shows up properly.
https://a4jp.com/0/bugs/2020-03-24-09-23-pm-002.png

When transparence is turned on it needs to show overflow-y of the #site-content div or there needs to be something explaining this problem. Any ideas you have a re good though.

Just pushed an update to slightly tweak the hamburger icon (padding and size) so it is now perfectly centred and has a size that we feel is in keeping with the original icon.

With regards to the Google advice as per button size, the clickable area is 86px x 44px (reducing to 66px x 87px on mobile). This is by design of the original theme and if Google aren’t happy with it I’m sure you’ll hear from Google Search Console? If so, this should be a bug report to the theme developer!

With regards to your “overflow-y” issue. We just can’t replicate the problem! Can you please explain step by step exactly what options you are using to see this issue? Are you talking about “Customizer – Nav Options – Transparent Navigation” or “Customizer – Header Options – Transparent Header”? We do not recognise the screen grabs you have shown as being part of the theme!

Thank you,

Oliver

As the original issue in this thread has been resolved, we are marking it as resolved now.

Oliver