swap out logo for transparent header

BB Theme
1

Trying to implement the ever popular transparent header over image that becomes opaque on scroll. Like this: http://www.kriesi.at/themes/enfold-restaurant-one-page/

Link to my work in progress below.

Have transparency working, have styled menu colours for transparent header.

What I need to do now somehow is use a different logo image on the transparent header.

Any ideas?

Many thanks.

2

[Content Hidden]

3

Hi Mark,

To do this, you’re going to need to use custom CSS and target the non-fixed header. You can use the CSS below, as a starting point.

.fl-page-header-primary .fl-logo-img {
  content: url(Link to Image);
  box-sizing: content-box; 
  width: Add width value here; 
  height: Add height value here;
}

In the content property, be sure to include the URL for the replacement logo image and adjust the height and width values.

Thanks,
Danny

4

Hi Danny - sorry, no change at all.

Implemented fix on line 251 of child style.css on demo site above for your information.

Not sure of approach here - one thing to point out is replacement logo may be semi transparent so can’t just sit on top of the other.

Many Thanks.

5

i sure like the way you have those popups when you scroll over the pics at the bottom of the page…did you do that in BB? What is that function called?

thanks.

6

Herb - that links to another theme not BB, just using the header as an example of what I’m trying to achieve.

7

Hi Mark,

I apologise, but I am not seeing any issue. I viewed your site and I am seeing two different logo’s?

There is a white logo and then when you scroll it switches back to the blue logo. Is this not what you wanted to achieve?

Thanks,
Danny

8

Danny - apologies back at you - must be caching at my end. Confirm working in Chrome will check other browsers tomorrow. Many thanks for all your help!

9

Hi Mark,

No problem and happy to hear it is working for you!

Thanks,
Danny

10

Follow up - afraid it’s not working on IE / FF (win 8.1 / 10).

Have cleared caches and tested on a separate machines to be sure and though working on Chrome it isn’t on FF/IE.

11

Hey Mark,

We can actually make the other logo as a background image and hide the main logo by reducing its opacity. That way, we get maximum compatibility since most browsers support the background image style. Try using the CSS snippet below and let us know how it goes!

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

Ben