Small Layout Bug: Google Fonts and Off-Canvas Close

kars

Hello,

I've noticed a bug that when changing to certain Google Fonts, the "X" in the off-canvas close button becomes off-centered (too small) and when animated flops around - due to size variations in particular fonts.

This can be corrected with custom CSS via adding padding, line-height, or increasing size - but it would be nice not to have to. This icon would probably be better served with an SVG or font-awesome icon in a future update - or updating T4 css to account for font-size variations in this icon and ensure things remain centered.

Ninja

kars
Hi
Can you share your current site URL on which you are facing the issue? As in font icon as well there is font size value.

kars

Ninja

Hi Ninja,

I've provided a URL in the hidden fields. The Google font utilized is Poppins. This off-canvas button was designed with the Google Font Inter (default) and changing it to most any other font causes the issue. It can only be solved currently by custom CSS correction.

Ninja

kars
Hi
I checked your site and it already use icon from font awesome

No matter what font on site it has own style code

kars

Ninja

Ninja - Please re-read my post. I have no idea why you have responded about the hamburger menu.

Can you see the image I posted where I drew the big red arrow pointing to the problem? The problem is the "X" that closes the off-canvas menu. When you change to a different Google font from default Inter, the "X" becomes un-centered and lopsided when it animates.

The site I have provided is just the T4-Blank BS5 demo on our on server. This issue will happen on any installation.

Thanks

Ninja

kars
Hi
Sorry for misunderstand, i got what you mean. It does not change the close button the default font is applied as it is normal

.t4-offcanvas .t4-off-canvas-header .close span {
    color: #666;
    display: block;
    height: 32px;
    font-size: 24px;
    line-height: 28px;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    width: 32px;
}

I have raised the feedback to concern team on this for check in improvements.
On hover it only transition reverse side.

kars

Ninja

Thanks Ninja. 🙂 I wish Q/A team would check these things though.

Ninja

kars
Hi
The ticket is already submitted for the team to check and if found issue they will add.
Thanks for understanding.