SOLVED: Hamburger menu icon lines don't have the same thickness

Bugs
1

Bricks Version: 1.5
Browser: Chrome 102

One of the three lines of my hamburger icon seems to have a different thickness.
Screenshot 2022-08-16 131003
Sometimes when I change the alignment properties of the container the line changes thickness but is still is not as thick as the other ones:
Screenshot 2022-08-16 131136
Any ideas what could be causing this?

1 Like
2

Hi Serge,
Thanks so much for your report!

The issue appears only in the builder, right? The viewport scaling can cause minor display problems on the canvas but shouldn’t be a problem on the frontend. Can you confirm?

Best regards,
timmse

3

The way they use a block and 2px height doesn’t render right. I have seen the same problem with other builders who do the hamburger icon the same way. I see the same in Firefox too.

Even if I use height: 0 and use border-top: 2px solid #000000, I still see the same rending oddness.

It is better to use icons and they have no problems like that.

Funny though, if I set the spacing to top: 7.5px for the middle and to: 14.5px for the lower, it renders OK. With the default “top: 7px” and “top: 14px” the rendering is odd.

.brxe-nav-menu .bricks-mobile-menu-toggle .bar-center {
    min-width: 12px;
    top: 7.5px;
    width: 20px;
}

.brxe-nav-menu .bricks-mobile-menu-toggle .bar-bottom {
    min-width: 12px;
    top: 14.5px;
    width: 20px;
}
1 Like
4

Hi timmse, nope it appears on the frontend as well and on the Opera browser as well as Chrome. I noticed that changing the size in the browser to 80% or 120% rendered the lines properly again so it seems to be a browser scaling thing?

Anyway, I used this css code to individually target the lines which now renders them properly at 100% browser zoom/size - however at other zoom levels it seems to look weird again.

root .bar-center {
height: .25rem;
border-radius: 29px;
}

root .bar-bottom {
height: .25rem;
border-radius: 29px;

}

root .bar-top {
height: .25rem;
border-radius: 29px;

}

1 Like
5

Yes, it’s definitely related to the resolution, pixel density, etc. that we can’t influence.

1 Like
6

Serge, it’s the graphics Display scaling at 125% causing it for me. Your CSS works and makes it look good at 150% for me too. :slight_smile:

7

I agree, @timmse maybe the team can consider using an icon or lottie for the hamburger to fix this.

8

Tables with border-collapse: collapse; have display scaling oddness for me too. It’s just the way it is. :slight_smile:

9

We will think about this when the time comes. Overall, there are a few things that can/should be improved about the menu - but unfortunately, we can’t do everything at once either.

Since we have tracked down the problem and have at least a temporary solution, I suggest I mark the thread as solved for now.

Best regards,
timmse

1 Like