Alternate header and fixed header logo

BB Theme
1

I would like to have an alternate header that would be visible only when on particular pages of my site (mainly a logo and font change). How would I go about that?

Also, I would like to only use part of my logo on the fixed/sticky header.

Thank you.

2

Hey Javi,

Sorry to say but such a feature isn’t available on the BB theme.

Not really sure about your second question though. Did you want to use a different logo on the fixed header? If so, there’s no setting for that in BB but can be achieved via custom CSS. Can you share the URL of the page in question so we can check?

Ben

3

My working site: maquette.academieequestresuroit.com

You see the logo is a horse head and text? I just want the horse head to show on the sticky header.

4

Hi Javi,

To replace the image when the header is fixed, you will need to use the following CSS.

.fl-page-header-fixed .fl-page-header-logo {
  background-image: url(http://www.mysite.com/bg.jpg);
  background-repeat: no-repeat;
}
.fl-page-header-fixed .fl-logo-img {
  opacity: 0;
}

Be sure to replace http://www.mysite.com/bg.jpg with the link to your horse head image.

Thanks,
Danny

5

Thanks, Danny! That worked.

For my alternate header style, do you know if I could add a special php function? I’d like to change the font and logo for 4 pages addressed to children.

6

Hi Javi,

If I understand correctly, you could do this via CSS and wouldn’t require custom PHP.

WordPress by default adds a unique ID for each page, post, category and so forth you create. You can then use these IDs to style individual or groups of pages.

If you provide the links for these four pages, I can give you the class for each of them. Then you use those classes to style them pages only.

Alternatively, if you want to do this yourself. You can locate the page id by either following the instructions on the link below or using Chrome dev tools (see screenshot).

https://en.support.wordpress.com/widgets/pages-widget/ (see image at the bottom of the article)

CloudApp

Once you have your ID’s you can use them in your CSS like this:

.page-id-1 .className {
  ...
}

To style groups of pages using the same styling, your CSS will look something like this:

.page-id-1 .className,
.page-id-2 .className,
.page-id-3 .className {
  ...
}

Thanks,
Danny

7

Oh! That’s great if I can do it through CSS!

My working page is http://maquette.academieequestresuroit.com/

I found my pages IDs are 22, 24, 26 and 1083.

To change the logo, I imagine I would do something similar to what you said about the sticky header?

Thing is there are many different divs and I am not sure which particular class to use. I’d really appreciate if you could take a look.

Thank you so much!

8

Hi Javi,

To change the logo so that they’re the same for the page ID’s you provided above. Please, use the following CSS and be sure to add the link to your image.

.page-id-22 .fl-page-header-fixed .fl-page-header-logo,
.page-id-24 .fl-page-header-fixed .fl-page-header-logo,
.page-id-26 .fl-page-header-fixed .fl-page-header-logo,
.page-id-1083 .fl-page-header-fixed .fl-page-header-logo {
  background-image: url(http://www.mysite.com/bg.jpg);
  background-repeat: no-repeat;
}
.page-id-22 .fl-page-header-fixed .fl-logo-img,
.page-id-24 .fl-page-header-fixed .fl-logo-img,
.page-id-26 .fl-page-header-fixed .fl-logo-img,
.page-id-1083 .fl-page-header-fixed .fl-logo-img {
  opacity: 0;
}

Thanks,
Danny

9

That works! Thank you so much!

I tweaked it to change both the regular header as well as the fixed one.

One last thing, I can’t seem to be able to change the header font for these 4 page IDs. I understand the logic behind the opacity: 0 for the standard header but I’m blocked there…

10

Hi Javi,

Can you provide a link to one of these pages and also a screenshot of the text you want to change the font for, please?

Can you also tell me what font you want to use, please?

Thanks,
Danny