Different font-weight in menu / navigation

[lenalavendel]

Hi team krisi,
in my main-menu the font-weight or font-size of three words is different to the other. They are a little bit thinner. Its only visible on large screens and Safari (so far I know).
I can’t find the detail which causes the difference.
Here is a sreenshot:
Screenshot

[lenalavendel]

Link

[Ismael]

Hi,

Thank you for using Enfold.

The menu items look the same on my browser, Chrome Windows 7. What is your browser?

View post on imgur.com

Best regards,
Ismael

[lenalavendel]

Its on Safari and only on larger mac screen. Unfortunately the combination of the costumer.

[Guenni007]

hm seems to be a rendering problem of safari. it is strange because if you activate each of your menu points one after the other. sometimes the difference is gone.
By the way – the same thing on Safari Technology Preview.

[lenalavendel]

I found out its because of the submenus on the left-hand side of the three thinner words.

I changed the “margin-top:-1px” for .av-main-nav ul to 1px, so the submenu slips down and doesn’t cover (?) the menu items anymore.
Thanks for your concern Guenni007.

[lenalavendel]

Oh. Rejoice too soon.
Margin-top has to be at least 13px, which looks weird with a gap between the main- and submenu.

Which part of the submenu covers the main-menu-items?

[Guenni007]

i guess it has something to do with: anti-aliasing of safari font rendering
try this here first as a global rule

html {  
    -webkit-font-smoothing: antialiased;
}

but on this adivise from: https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/

Use Wisely
For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.

try perhaps only:

.av-main-nav > li > a {
    -webkit-font-smoothing: antialiased;
}

by the way i see you use a different font for this – do you have all web-font files uploaded?

• This reply was modified 7 years, 12 months ago by Guenni007.

[Basilis]

Hi!

Let us know if what @Guenni007 is suggesting, if that does not work, also try

* {  
    -webkit-font-smoothing: antialiased;
}

let us know if you need anything else

Regards,
Basilis

[Guenni007]

na das scheint ja sehr wichtig gewesen zu sein.

[lenalavendel]

Thanks a lot that worked fine!

[Rikard]

Hi,

Great, glad to hear that. Thanks @guenni007 for helping out :-)

Best regards,
Rikard

[Author]

Posts