Transparent background in header

Hi there,

you can use a GP Page Header and set it to merged with Site Header. These articles provide some info:

https://docs.generatepress.com/article/page-header-overview/

Note: once the Page Header and Site Header are merged you can either make the Navigation colors transparent in the customiser, or you can set them in the Page Header (advanced tab). The latter means you can keep solid colors for sticky and transparent colors for merged header.

Thanks David

With you help , I almost achieved the results I needed only one problem

As you see in my example the header have a transparent background kind of a light gray.

1. I have defined this light gray with Customize in site header and works there,
2. But when I merge the site header and the page header I this color is lost , its like the background image is on top of the background color of the header
3. I have used the Advanced Options to define this transparent colors as background but then the whole image is covered in the transparent color

I am missing something right?

Regards

Hi,

ok for your current set-up it would be easier to hit the header with some CSS (adjust accordingly):

.generate-merged-header .site-header {
    background-color: rgba(35,117,224,0.5);
}

Thanks Dave worked super!!!

One last issue , I have added a logo for the mobile view to be shown instead the picture.

Since the header image is 2000 x 1000 is there a css code to resize the image for mobile view?

Regards
Agustin

I would suggest the following changes, remove the text from the background image and instead add this as content to the Page Header, currently the text in the image is being cut off when the browser is rescaled. It also makes the text indexable.

If you then still need to adjust the image or simply remove it we can apply some CSS to do so. Let me know

OK I will do that and come back to you then

Regards

Done David , I will use an slider instead, fixed the scaling , but in mobile the menu is Kind of Lost in the image and a big gray are now apears besides the slider, can this be fixed?

Maybe view the Menu Above the Slider , in black instead of white, any other solution you suggest wiil be great, only need to fix the mobile view , Menu and Slider.

Regards

With MetaSlider under the Advanced Options their is the option to stretch 100% - currently it is limited to 2000px wide. You will need to remove the full height option in the header as well or you will have a lot of empty space below it on smaller screens.

Hi Dave, fxed then. only one issue remains

the mobile menu is lost in the picture now, can be put above or below the slider, outside of the picture?

I attach a pic

You can assign a Mobile Header in the Customiser > Layout > Header this should resolve the problem

Hi Dave, I only managed to center the mobile menu, but not put it outside the header.

I am missing some setting ?

I hve used the option mobile menu on and off and the problem still exists.

Regards

You can un-merge the navigation on mobile like this:

@media (max-width: 768px) {
    .generate-combined-header {
        position: relative;
    }
}

Does that get you closer?

Let me know :)

Hi Tom!
I added some margin and worked great!!!!

Regards and thanks to both of you
Agustin

You're welcome. Glad we could help