Font inconsistency between Header and Sticky Header

Hi there,

I’ve noticed that the font in my main header and sticky header looks slightly different — even though when I check in the browser developer tools, both have the same font-family, weight, and size settings.

Here are screenshots for reference:
1️⃣ Full header section
2️⃣ Sticky header version
3️⃣ Search icon section

Both should use the same typography, but the sticky header’s font appears thinner or slightly different in rendering.

I’ve already inspected all font-related CSS properties (font-family, font-weight, letter-spacing, etc.), and they match exactly between both elements.

Could you please help me figure out what might be causing this difference in appearance?
Maybe some CSS inheritance or transform affecting font rendering in the sticky header?

Thank you so much for your help!

Best,

Attachments:

You must be logged in to view attached files.

Hi reneersloan,

Thanks for reaching to us and appreciate your patience.

In order to assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Best Regards,
Hung PD

Hi Hung,

Thanks for the quick reply. I’ve added a temporary wp-admin login (URL, username, and password) to the Private Content section of this thread. Please use it to access my site and investigate.

Best regards,

Hi reneersloan,

Thanks for your patience.

Please go to Theme Settings > Typography > Advanced and remove .wd-tools-element .wd-tools-text Custom Selectors.

Best Regards,
Hung PD

Hi Hung,

Thank you for the follow-up.

I’ve tested your suggestion — I removed the .wd-tools-element .wd-tools-text Custom Selector from Theme Settings → Typography → Advanced, and also tried re-adding it using the selector you mentioned.

However, this change only affects the main header, not the sticky (cloned) header.
The cloned sticky header seems to use a duplicated structure (inside .whb-clone) that doesn’t inherit the same typography settings applied through the Custom Selector panel.

Even after updating the selector as suggested, the font size and icon size of the sticky header remain unchanged.

Could you please advise how to apply the same typography and icon size settings to the cloned sticky header version as well?

Thank you so much for your help and time!

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

I apologize for the misunderstanding.

Your custom selector isn’t working in this case because its specificity is insufficient to override the styles it’s intended to change. However, this issue can be solved another way. The main reason you see a difference in element sizes between the sticky and non-sticky headers is that you are using your header’s Top Bar as the main row, despite the fact that, by default, all elements located in the Top Bar of our theme have a reduced size. For clarity, here is a screenshot showing identical elements placed in the main header and the Top Bar, along with the default difference in their sizes: https://monosnap.ai/file/jdydpgAx0veEiXU9drSaoHWT121DxB

The simplest and most reliable solution to your problem would be to avoid using the Top Bar in your header, as, judging by your design, you don’t need it—the header banner is serving the role of the top bar in your case. Instead, you need to shift all the content you have in the header one row down. So, instead of using Top Bar and Main Header (https://monosnap.ai/file/af0h04HzbzKqSw6DMv9x8wkS4QJHe1), you should use Main Header and Header Bottom (https://monosnap.ai/file/KU9wQhe9MrPnuAQfjMNGGJkxyIycLC).

It’s possible that after you shift the elements down one row, you might need to redefine the background, height, alignment, and visibility of the rows once. However, this will allow you to ensure consistency in the text size of the header elements between the Main Header and the Sticky Header. After this change, all the custom selectors you created to solve this problem can be deleted, and the typography of the header elements can be controlled using a single Header font option (https://monosnap.ai/file/bI4meSxFlNtMPG6C8D6Bw4hzLoEQxw), assuming their typography hasn’t been overridden elsewhere.

Kind Regards

[Author]

Posts