Hamburger menu graphic is "stuck" in the middle of carousel

I Need Help
1

So I don’t have any idea what I did or how this happened. Check out this site: https://vmedia.de/claire-3

Look carefully at the first slide in the carousel. The hamburger menu button is visible in the middle of the first slide. It is not visible in the second slide. If I resize the browser window to trigger the mobile menu, the hamburger icon is shown twice: once in the menu/navi, and once in the middle of the first slide.

I also can’t delete or move it in the layer navigator because it’s locked.

See screenshots …

27
271898×1040 438 KB

43
432137×1171 523 KB

2

I guess I found the culprit: I used a piece of code that I found here in the forum to add some styling to the hamburger icon:

#nav-toggle .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#5CB5CE' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); margin-right: 25px; }

After removing the code the problem disappeared …

3

The piece of code is nice / Thanks to this forum…
…But shoud not be nessccesssary as Blocs promisses to be easy for non coders.

Or am I wrong?

4

Hi @pixelwork

Well non coding is “ready to wear” and in my opinion entirely doable in Blocs for non-coders but if you want haute couture then you need to add a bit of code…

MDS

1 Like
5

All right!
with a little code understanding I can handle as far as I can.
But the beautiful possibilities remain hidden to me.
Thanks having you as member of this helpfull forum

6

Hi Karl @pixelwork

You can also ask the forum to help for coding.

Thanks for you kind comment.

MDS

7

I agree. That’s what’s cool about Blocs. You have finished code in a simple interface that allows just about anybody to build awesome Bootstrap 4 websites - and - if you want to pimp your site, just add code, write your own CSS … awesome :wink:

Only this little piece of PimpCode did some wacky things. I still can’t figure out how the hamburger icon managed to get pushed down into a layer in the carousel, though …

8

There are some mysteries I agree.

Perhaps a duplicate of the wrong element or a class with same starting letters applied to wrong element.

Who knows… it has happened to me as well.

Today my big struggle is understanding why my icons cannot be resized applying font size changes… :wink:

MDS

9

@MDS

If you have applied an icon size in the right side bar, its likely a CSS issue, eg… assigning a medium size to the icon will add the following and override anything you try.

.icon-md {
font-size: 30px!important;
}
10

Oh it’s been a year since that issue and do not recall the exact issue but no longer one today. :stuck_out_tongue_winking_eye:

11

:rofl::rofl::rofl: Fell for the suggested topics at the bottom again. Man that needs fixing :kissing_closed_eyes: @MDS

12

No problem. Wish you there at that time. Thanks anyway. :wink:

1 Like