Custom text in header

BB Theme
1

Hey guys,

Hope you can help. I have a client who wants different sized text in the header, with some text also in italics. How can I do this?

They would also prefer the header text to sit under the logo rather than to the right hand side. Test site is here:
http://jason-parsons.co.uk/the-lucky-truth/

Also I have tried to increase the social icons size by following this guide:
http://forum.wpbeaverbuilder.com/knowledge-base/adjust-size-of-social-icons/
But am having no joy. Am I doing something wrong or is this code no longer valid?

BTW, love the work you guys do. Product is great and the support is too. I have always managed to find answers to my queries in this forum in the past which is great.

Thanks,

Jason

2

Hey Jason,

Welcome to the BB forums! And thanks for the kind words! :slight_smile:

You can try adding the CSS snippet below to change the font size as well as italicize it.

.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text {
  font-size: 20px;
  font-style: italic;
}

Did you want to transfer just the header text but leave the social icons in place? That’s actually pretty hard to do via CSS. But you can check the link below. It’s a discussion regarding adding a new spot on the customizer for another text area on the header, specifically below the logo. Give it a shot and let us know how it goes! :slight_smile:

Re adjusting the size of the social icons, the top bar and header code on the KB were interchanged. I’ve fixed it now. Thanks for the heads up! :slight_smile:

Ben

3

Great. Thanks Ben.

Yes, was hoping to leave the icons and move the text. You didn’t appear to include the link to the discussion?

With regards to the header text. The italic setting works great, thanks. But would it be possible to have different sized text in the header. So for example one sentence size 20, non-italic and then another sentence size 16 and italic?

Jason

4

Hey Jason,

Sorry about that! Pasting it below. :slight_smile:
http://forum.wpbeaverbuilder.com/support/q/adding-a-second-line-tag-line-to-header/

That should be possible. On your header content, you can wrap your sentences in span tags and assign classes like so…
<span class="sentence1">Sentence 1</span><span class="sentence2">Sentence 2</span>

Then add styling accordingly using the format below.

.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text .sentence1 {
  font-size: 20px;
  font-style: italic;
}
.fl-page-nav-bottom .fl-page-header-content .fl-page-header-text .sentence2 {
  font-size: 30px;
  font-style: normal;
}

Let us know how it goes! :slight_smile:

Ben

5

That’s all working great. Thanks Ben.

6

Glad I could help! Enjoy BB! :slight_smile:

Ben