[Resolved] Using 2 fonts in the header text

[johnno43]

Hi There

I have a client who wants their header text set using 2 different fonts. She has it set that way on her current website which she created with a website builder from her hosting provider. She wants the header retaining for the website im doing for her. Is there a way of achieving this without turning it into an image, which im not keen on but will use if all else fails

[Tom]

You would have to disable the site title in the Customizer and then add it inside GP Hooks where you can control the exact HTML output.

Like this:

<div class="site-branding">
    <p class="main-title"><a href="URL TO YOUR HOMEPAGE" alt="YOUR SITE TITLE">My awesome <span class="second-font">title</span></a></p>
</div>

Then your CSS:

.second-font {
    font-family: Whatever;
}

[johnno43]

Hi There

Thanks for the reply. I’ve not used GP hooks before so im excited to try it out. Just a few questions if you don’t mind.
1. Does the CSS go into the GP Hooks box as well as the HTML or does that go somewhere else?
2. I have got the Site title set inline with the menu, but when i use the GP Hook it goes above. How can i make it so it stays inline again?
3. What code would i need to add to change the background colour to match the rest of the site?

The site is now live at http://www.alexandrahazard-soprano.com

John

[Tom]

I just adjusted the HTML above so it should look identical to what you have there now.

As for the CSS, this should help: http://docs.generatepress.com/article/adding-css/

[johnno43]

Hi Tom
Im still having trouble getting this to work.
The CSS changes the second font but not in the way i want it to but the main problem is the name still appears above the menu instead of along side it. And the background needs changing to black
At the moment im testing it on my dev site on my local machine using desktop server
I have screenshots if that helps

Many thanks
John

[Leo]

Hi John,

Is the Navigation Location set to either Float Left or Float Right in Customizer > Layout > Primary Navigation?

Let us know.

[johnno43]

Yes it is I never thought about that

[Leo]

Just trying to help 🙂

I just tested Tom’s code and it’s working without additional code when navigation location set to float right.

Did you add it to Before Header Content hook?

[johnno43]

No I put it in wp_head
I’m assuming it’s something I’m doing wrong rather than Tom’s code

[Leo]

Try adding it to Before Header Content hook and it should work 🙂

Let us know.

[johnno43]

Thanks I will try later as I’m out of the office at the moment

[Leo]

Sounds good. Then you can change the background color in Customizer > Colors > Header > Background 🙂

[johnno43]

Hi Guys

Just to let you know that changing the code to the before content header worked perfectly. Thank you both so much for your help.
If i may i have another small problem now.
I need to have 2 pages on the site with black backgrounds and the rest with white backgrounds.
I have tried this method:
body.page-id-xx {
background-color: #FFFFFF;
}
I placed this in simple css but it didnt work. Does it need to go somewhere else or is there another way?

Many thanks
John

[Leo]

Hi John,

That code should work. Make sure the page id number is correct and the color code is changed to #000000 if you want black.

Give it another show and let me know if it still doesn’t work?

[johnno43]

Still not working so here is some more info.

This is the code for the home page
body.page-id-7 {
background-color: #000000;
}

Im using Elementor page builder. I set the content colour to white in customiser for the rest of the site and its now just the home page that i want black. This is currently how it looks though

http://www.alexandrahazard-soprano.com/

[Author]

Posts