Broken Header

Hello I’ve recently opened a thread here for how to add custom widget area into a header and it all worked fine.

Now I have a problem that the items that are in the area which are social media icons get broken on different sizes of the browser window.

Do you maybe have any tips on how to fix this or work around it even?

Img Link

Thanks in advance

One more Thing.

How would one go about changing all the font on the website to Palatino?

Hi there,
I hope you are doing well, thanks for reaching out to us.

This can be done with the help of some Custom CSS. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.

Looking forward to your reply :slight_smile:

Best Regards,
Support.

Hey, thanks for the reply

i can’t provide you with a link because the website is being build locally.

The area the items are in is a custom widget area that i created and it contains two items the widget with the social media icons and another one with the company logo which i am not really comfortable showing.

on fullscreen they work good and on the resolutions that WordPress provides for “mobile” testing as well but anything in between is broken.

cheers.

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

h1, h2, h3, h4, h5, p, a{
     font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif!important;
}

Of course, you’ll need to import the font before this actually works.
Here’s a little info on how to get that done:

I hope this helps :slight_smile:

Best Regards,
Support

Fixed the header problems, thanks

going to try with the font when i get the change.

cheers

Hey there,

Please keep me posted on the results once you have gotten the chance to use the code.

Best Regards,
Support

I have used the Fontface technic and it partially works.

Main header changes but other sections of the page stay the same (like about)

do you maybe have any technic that I can use that changes all of them or do I have to change the CSS of every single area on the page

Cheers.

Hello there,

Thanks for getting back to us.

You can try out the following CSS code to change the font for the sections.


/*Section font*/
.front-page-section .section-header .section-description {
   font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !important;
}

Best Regards,
Support

no, does nothing for me. will try and play around with it a bit

Hello there,

Thanks for the update.

Another option is to use the following plugin to change the font used in the theme:

Best Regards,
Support

Yea ill figure something out.

This plugin only partialy changes my websites font. for instance my sidebar.

Recent news and archives get changed while categories stay the same even after entering custom css for it.

Testimonials stay the same and News section as well while everything else changes.

Hey there,
Hope you’re doing well today

Since we’re unable to test CSS on your site while you’re local, you may try to generate the CSS necessary to make those changes using the SiteOrigin CSS plugin linked below:

You may have a look at this video to get an idea of how the plugin works:

I hope this helps :slight_smile:

Best Regards,
Support

Wow this plugin

such a gamechanger

I managed to change almost all of it so I have the desired font now

but some parts still don’t want to change

for instance the

#about .section-header h3
i do the :
#about .section-header h3 {
font-family: Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif !important;
}

still no change maybe some advice on what to do

it is very strange because the Services title is changed to the correct font and all and that one is not.

thanks.

Hello there,

Thanks for keeping us updated.

Please try using the following CSS code instead to change the font family:


/*Header Font*/
#about .section-header h3 {
    font-family: Palatino;
}

Best Regards,
Support

All problems were resolved.

Thank you very much.

Great support!

Cheers.

Another question. I have the top header fixed so it scrolls down with the website all the way.

In mobile views both table and phone when I open the menu on the side the menu appears on top of the website and not where we are currently looking, unless of course we are on top

I would like to know how to make it so the menu appears wherever the user is right now, so they don’t have to scroll all the way back up to get access to the menu