Menu Icon Jumps on Click - Chrome & Opera only

[Finlando]

Hi there!

Sorry for bothering again.

I have a small but strange Issue that I can easily fix, but not for all browsers at once. (In the green topbar)

The Icons of the menu Items are jumping one pixel up - on click (:active stage) --> I can see this Issue only on Chrome and Opera. Firefox and Edge are fine.

Any kind of help would be great.

[friech]

Hi @Finlando,

Thank you for writing in, but I cant replicate this issue on my end, yes on Chrome (please see screenshot).

Please provide us a step by step guide on how we can replicate the said issue.

Cheers!

[Finlando]

Hi @friech,

Here You can see how the icon moves one pixel up on click:

It should be aligned with the text on click. But wehen I play with margins on the :active state, I mess up the alignment on other browsers.

Thanks a lot in advance!

[christian]

Hey @Finlando,

I see your concern but regretfully, browsers work render properties differently so your the margin doesn’t work well for this case. Try utilizing relative positioning instead. Buttons are relatively positioned in our theme so you just set the top position on active like.

.x-anchor:active {
    top:2px;  
}

Hope that helps.

[Finlando]

Hey @christian_y!

Thanks a lot!

[Finlando]

Hey there!

I removed all margins and the icons are not jumping any more.

But they aren’t aligned with the text on Firefox & Edge. (Chrome & Opera is perfect)

Any chances to align the icons on all browsers?

Thanks a lot in advance!

[paul.r]

Hi,

Try adding a class to your navigation inline element

Then add this in Header > CSS

.my-menu .x-graphic {
   line-height: 12px;
}

Hope that helps

[Finlando]

Hi,

Thanks a lot for this solution.

That fixes the problem on Chrome, Opera and Edge. On Firefox the icons are not aligned with the text.

Sorry for bothering all the time with that issue, but that’s the main part of the website.

Thanks!

[rad]

Hi @Finlando,

It appears that you have implemented it through Element CSS instead through Class name, please change it to this

$el .x-graphic {
    line-height: 14px !important;
}
@-moz-document url-prefix() {
$el .x-graphic {
    line-height: 13px !important;
}
}

That should do it for firefox too.

Cheers!

[Finlando]

@Rad =

[ruenel]

We’re just glad @Rad were able to help you out.