[Resolved] How to achieve a "jumbotron-ish" style in generatepress?

[mirthar]

Hi Tom and community,
it’s a while since I am trying to obtain a sort of jumbotron in generatepress without success :(.

The effect I would achieve is this one Dummy header but I am having a hard time pulling it off.

Is it possible to have this structure in generatepress?

Any solution will be much appreciated!

[Tom]

You could do this in GP Hooks by using the “Before Header Content” hook.

For example:

<div class="jumbotron">
    <h2>Your heading in here</h2>
    <a class="button" href="#">A button</a> <a class="button" href="#">Another button</a>
</div>

Then you can style it using the jumbotron class.

[mirthar]

Thanks for your reply Tom, and sorry for being late!
I tried and played around a bit with this code, the real issue that I still have is with the background for the “jumbotron” class.

It looks like it’s boxed and I cannot find a way to extend it full screen.
I would like to obtain a full stretched background for this row, like in the header of “statement” child-theme.

What am I missing?
Thanks for your time

[Tom]

You can set the header background color using the Colors add-on in “Customize > Colors > Header Colors”.

That will apply to the entire fluid header 🙂

[mirthar]

Great!
Thanks Tom! That was the trick I was missing!

However, in this way if I would to put an image as background instead of a flat color background, I would still see it boxed, framed by the header background color.

Is not there any other way to have a full width background image in the header? Like displayed in the twenty thirteen one?

Thanks a lot for your time and replies 🙂

[mirthar]

Ok now I got it working 🙂

I had to change the values in Customize > Element Spacing > Header to 0
and that’s it!
It works even with a full width image background!

Thanks a lot for your kindness and support!
I just have one more question but it’s not thread related. But I still have to get my hands dirty on this! I will post it if I cannot figure it out,

This theme is A-W-E-S-O-M-E!!

[Tom]

Awesome, glad you figured it out 🙂

[Author]

Posts