[RadModerator]

Hi there,

It’s a cross-domain issue which has no relation with font size. It can affect the font-family but not the size.

It can be solved by adding these to your site’s .htaccess file

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Methods "OPTIONS, GET, POST"
Header set Access-Control-Allow-Headers "Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control"
</ifModule>

If this doesn’t fix CORS issue, then you may contact your hosting provider and have them setup for you.

Thanks!

[MatthieuDelageParticipant]

I did it but it didn’t change anything! The issue remains.

[RadModerator]

Hi there,

I checked and there is no font issue anymore (CORS), may I know what issues are left? Is it still the custom headline size? It’s currently set to 40px and it’s working fine (displayed as 40px).

Thanks.

[MatthieuDelageParticipant]

Actually things are fine now, thank you! The only issue that remains is that the text in the blue bars is not properly vertically centered (there is too blue space underneath the text an d too little above it).

Do you know how I can fix this? I tried adding some padding but it generates too much blue space on the mobile version, and it still doesn’t get it perfectly centered even on the desktop version.

[Rue NelModerator]

Hello There,

Thanks for writing in! The contents in your blue section is not horizontally and vertically align because of the setting you set in the customizer. Please go to Appearance > Customize > Header > Navbar and set the “Navbar Top Height (px)” to at least 175 pixels. At the moment, it is only 110.

Hope this helps. Please let us know how it goes.

[MatthieuDelageParticipant]

Hi, thanks for the answer. I’ve tried, it doesn’t solve the problem.

On top of that, your colleagues in another thread (https://community.theme.co/forums/topic/add-clickable-phone-number-in-menu/) have asked me to reduce the Navbar Top Height to 80 px, to fix another issue (I couldn’t properly click on the phone number when I accessed the website on my phone). This has worked to fix the issue, so I would need to keep it at 80 px.

However at the moment, I have kept it at 110 px because :

– At 80px: the phone number can be clicked on properly but the blue bar text is so vertically unaligned that it cuts a part of the letters

– At 110px: the phone number cannot be clicked on properly and the blue bar text is not well aligned (this is the “least bad” option)

– At 175px: the phone number cannot be clicked on properly, the blue bar text is not well aligned and the blue bar appears way too low on my phone

I would like to get to a situation where the clickable phone number works well AND the blue bar text is well aligned and the blue bar does not appear too low on my phone.

[LelyModerator]

Hi There,

The issue is because of the structure of the menu and how CSS was used to manipulate the position. Please try updating this custom CSS:

#menu-item-545 a {
    margin-top: 50px;
    color: #000080;
    font-size: 20px;
    margin-right: -210px;
}
 

To this:

#menu-item-545 a {
    color: #000080;
    font-size: 20px;
}
 

Then on Appearance > Menu, put the phone number at the end of the menu. So from like this:

688 407 302
GUITAR LESSONS
FREE CLASS

It should be like this:

GUITAR LESSONS
FREE CLASS
688 407 302

Then add this custom CSS too:

li#menu-item-545 {
    clear: left;
}

Then adjust Navbar top height to 80px. The issue on mobile is because of the positioning of the link. Then to vertically align the text on the blue bar, add mts on the headline class field.
See this for guidance:https://community.theme.co/kb/css-class-index/

See how it will be:http://screencast-o-matic.com/watch/cberns651K

Hope this helps.

[Author]

Posts