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

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

Home Forums Support How to achieve a "jumbotron-ish" style in generatepress?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #198513
    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!

    #198607
    Tom
    Lead Developer
    Lead Developer

    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.

    #199069
    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

    #199080
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #199084
    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 🙂

    #199102
    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!!

    #199190
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you figured it out 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.