Bottom Bar Options

Hi Simon,

Of course, GB can do it :) (by using block element)

I just made a similar one, the structure will be like this:
https://www.screencast.com/t/UXpc5Im1TYA

The image is the background image in container A-1, enter contain in size, and left bottom in position:
https://www.screencast.com/t/psGGCmVFWOj

Then give container A-2 a negative top margin, adjust the container's z-index in spacing section.

We could use generate_after_headerhook, then add similar CSS for the original bottom bar.

Let me know if you need further assistance.

Hi Ying, thank you so much for your amount of detail. I have followed the instructions as closely as possible but I'm missing something...

The bottom bar is showing under header instead of at the bottom of the page. It may be the hook name which is 'after_header' as I couldn't find 'generate_after_header'you recommended.

Yes, you'll need add some CSS to fix it at the bottom:

div#bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

I inspected this bottom bar, the structure does not seem right. Please refer to the structure here:
https://www.screencast.com/t/UXpc5Im1TYA

Hi, I redid it with the right structure so all good on that end and thank you for the code. It's now fixed at the bottom.

I have played with A-2's top margin and the z-index but it doesn't seem to change anything. Can't see the image at all.

Thanks again for your help.

Very close now :)

You could add this CSS:

.gb-container-4b07c1c4 {
    position: relative;
}

And set a min-height for the container which contains the image in GB's spacing settings, for eg. 400px.
https://www.screencast.com/t/WwjW7b4i

It should be somewhat looking like this:
https://www.screencast.com/t/SBjAa6aSkPb

Let me know :)

Thanks again Ying, yes almost there! :-)

For some reason, the background colour goes full height. Should background colour be set to A2 container?

What is changing the z-index number supposed to do?

This might be a dumb question but how do I move text and button to the right?

Yes, set the background color to A2 :) And clear background color of A.

Z-index is for stacking order of the elements, but it only applies to flex child element or element with position property. That's why I suggested adding the CSS for the image container.

Thank you so much Ying. It's looking brilliant now! The last thing is, any links in the content that's within the height of the background image isn't clickable and the button isn't working.

Also just noticed, the content column was previous up into the blue header but now it isn't.

Before:

After:

Must be interfering in some way with this code?

@media (min-width: 769px) {
    .single-post .page-hero + #page {
        margin-top: -160px; /* adjust margin to suit */
    }
}

Try add this CSS to bring the text container up:

.gb-container-240d9545 > .gb-inside-container {
    z-index: 999;
    position: relative;
}

For the second question, try to change the bottom bar hook from after_header to before_footer.

Let me know how it works :)

That's brilliant Ying, thank you so much for all of your help! :-)

Can I just hide on mobile please?

Hi there,

Can I just hide on mobile please?

Can you specify the elements you want to hide on mobile?

If it's a block, you can simply add hide-on-mobile class on its Additional CSS Class(es) text field.

alternatively, you can get it's unique class and do media query custom CSS for it.

Example: if you want bottom-bar class to be hidden on mobile, you can do something like this:

@media(max-width:768px){
.bottom-bar{
display:none;
}
}

Hi Elvin, I've added hide-on-mobile on the background image block but it's still showing.

Really I'd like a smaller version of bottom bar on mobile but that background image just isn't moving so maybe I just have to remove on mobile?