Pixel perfect categories dropdown menu?

Hello again!

There is something in the “Browse Categories” dropdown that is really bothering be – it is not pixel-perfect. I don’t know if this is a bug or intentional, but I’ve done my best to illustrate the problem (see attached files), because I can’t fix it myself. I am using your default demo on https://woodmart.xtemos.com/ as example. Specifically:

.wd-dropdown-cats {
    right: 0;
    z-index: 299;
    border: 1px solid rgba(129,129,129,0.15);
    border-top: none;
    box-shadow: none;
}

When the default 1px solid border is applied, it is actually 2px, because of the Alpha in the RGBA color. If you set a color without alpha, the border is indeed 1px.

Now, the hoover menus that appear to the right when you place the cursor over a menu item begin from within the element’s edge, but over the border (ignoring it) – so they get shifted 2px to the left. The div itself is OK, as demonstrated by the outline element in one of the attached pictures. If you remove the border property or set it to 0px, everything is pixel-perfect (but visually the dropdown menu is not looking great without a border).

So, how to correct this? Is there a way to tell the Hoover menus – “Hey, do not ignore the borders and start at the borders’ right end”? Essentially, to shift them 1 or 2px to the right, so everything is in line and pixel-perfect?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

1. Border width shifting with RGBA color is caused by WebKit browser rendering and cant be completely fixed via WordPress theme. If you want to change it behavior, try to replace RGBA color with simple HEX color without alpha opacity value. For example, you can add this custom code to the Global Custom CSS area in theme settings:

.website-wrapper .wd-dropdown-cats,
.website-wrapper .wd-nav-vertical>li:not(:last-child) {
	border-color: #E8E8E8;
}

2. Try to use the following custom code to shift vertical menu dropdown to right on one pixel.

.website-wrapper .wd-nav-vertical .wd-dropdown-menu {
	left: calc(100% + 1px);
}

Kind Regards

Thank you! That’s way better in my book 🙂

I decided to leave the border styling as it is and only use the 1px shift on the vertical menu (second code), because using a 1px border also creates a 1px left and right gap between the horizontal and vertical borders (see screenshot). Probably WebKit-related, too.

Thanks again!

Attachments:

You must be logged in to view attached files.

Hello,

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts