Disappearing Hamburger Icon

General Discussion
1

Hello people.

This afternoon I became aware that the hamburger menu icon on my gawrjuhs.art site has disappeared on certain devices.

Everything was working okay before I updated my iPhone Pro 12 to iOS14.5 on Monday evening. And I’ve read online that previous versions of iOS Safari had caused similar things to happen.

I’ve done the usually things, cleared browser cache etc., but without any success. The odd thing is when I view my site on a Mac using Safari’s Developer Tools, I can see the hamburger icon just fine. But it doesn’t appear in either Chrome or Firefox when I use their Developer Tools :flushed:

I currently have the following code – which I copied from another thread on the Blocs Forum last year – in a master Code Editor file for the site:

.navbar-toggler-icon {background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 32 32’ xmlns=‘SVG namespace’%3E%3Cpath stroke=‘#FFFFFF’ stroke-width=‘2’ stroke-linecap=‘round’ stroke-miterlimit=‘10’ d=‘M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”)!important;}

This post is to make you aware of this bug, and to look out for it when developing and testing your sites. If I find a way to resolve it, then I’ll certainly report back. Plus if anyone has any tips or tricks on how to change the colour of the hamburger menu quickly using the Blocs GUI, then I’d love you to share.

Thanks :slightly_smiling_face:

2

The site runs here on my iPhone XR OS 14.5 without any problem.

1 Like
3

Not here on my old Motorola running Android 9, whether on Chrome or Firefox. I was aware there was a bug with some of these coded options found on the forum and certain browsers. Nowadays I would say easy burger from @PeteSharp is by far your easiest option. https://blocsbuilder.com/easy-burger-custom-bric/

3 Likes
4

It looks to me your code is the problem. The hamburger itself is not visible but does work when clicking.

5

I developed the site last year using Blocs v3 @Jerry, and all worked well. So it’s a bit odd that the piece of code should suddenly stop working in the past 48 hours.

6

Thanks @Flashman ! I’ll take another look at it.

7

That’s the beauty of future! Elements of Blocs websites I build in 3 are not working anymore in 4. Same for upgrading from Bootstrap 4 to 5. Every update / upgrade comes with positives and challenges. Just relook at your code and any other elements involved to get to the source of the problem.

8

Quick update. I purchased @PeteSharp’s Easy Burger Bric, as suggested by @Flashman, and added it to my project. It was super easy to use, although I did have to change the size of the Icon Style from 2 rems to 1.2 rems, as the default size threw-off the styling of some of the other buttons on my home page for some reason… :thinking:

I’ve also junked the piece of code that was in the Code Editor file too.

Checked the site in all browsers and on all my Apple devices, and everything appears to be working as it should again.

Thanks all, for your rapid replies and suggestions. It’s always a pleasure coming on here.

3 Likes
9

Yeah, @PeteSharp easy burger rocks!

4 Likes
10

Thanks guys for your support. Glad you got it sorted @DerekDigital

2 Likes