[Support request] Header is transparent

[Matthew]

I’m using GP Premium, Beaver Buider (BB), Ultimate Add-Ons for Beaver Builder (UABB) and Beaver Builder Header Footer to design all of our websites at this point. Using that combination to achieve the exact, desired finished product, all of a sudden my header is transparent even though I haven’t coded it that way. I have a page called Header that I’ve specified should be used as the header instead of the default header of the theme, and because it’s transparent it looks horrible when scrolling down the alternate home page (http://apse.flywheelsites.com/home-page-2/).

I am NOT using the “Header” Element/Feature in GP.

Why is this happening, and how do I fix it?

[Leo]

Hi there,

Your site requires the login and password to see.

Can you provide it through Account Issues here?
https://generatepress.com/contact/

Make sure to reference the topic URL and we will respond here.

Thanks!

[Tom]

Hi there,

You’re not using GP to create your header, so I’m not sure if the plugin you’re using has an option to add a background color.

If not, this CSS should help:

.bhf-sticky-header .bhf-fixed {
    background: #fff;
}

[Matthew]

I resorted to using the Beaver Builder Header Footer plugin because there wasn’t an easy way to build custom, fancy headers that are responsive without writing code. It was more of a work-around than ideal solution since I’m not really a coder.

Is the Header Element you’ve added support for into your theme meant to be a better solution than how we previously had to do things? If so, do you also have a similar “Footer” Element in your library, and should I consider switching to that approach instead of the previously referenced workaround I have been using?

[Tom]

Your header right now looks like something that can be created in GP by default.

1. Upload a logo in Site Identity: https://docs.generatepress.com/article/adding-header-logo/
2. Set your navigation location to float right: https://docs.generatepress.com/article/navigation-location/
3. Add your header widgets in “Appearance > Widgets” in the “Header” area.
4. Add this CSS to make your header widgets inline:

.site-header .header-widget .widget {
    display: inline-block;
}

Let me know if that does it or not 🙂

[Author]

Posts