Pro, Header-Builder, Bottom, Bar 1, Elements behind not usable

[ERES]

Hey guys,

do you have a hint for me?
I try to achieve a fixed “book now”-button through your header builder and the bottom bar. But the width of the bottom bar is fixed 100% so the elements behind the bottom bar are not usable. How I can set the bottom bar to the width of the button? Is this possible?

Thank you very much!

[friech]

Hi @RSMG,

Thank you for writing in, please do the following, inspect your Bottom bar and set the background-color to transparent, and the Box shadow color to transparent as well.

• 

• 

Set the bar height to auto, so its height will depend on your button.

Then next inspect the Container, set the Self Flex to Fill Space and the Horizontal to End

• 

Then add your button on that container and style it.

Hope it helps,
Cheers!

[ERES]

Thanks for your answer but you did not understand the question. I don’t want to know how to build this, because I did the website in my video. I want to know how I can make the elements behind the bottom bar usable. With other word: How I can give Bar 1 the same width like the button inside of Container 1?

[jade]

Hi @RSMG,

Bars are designed to fill the entire width of the area since that is what bars are. A workaround for this is to play around with the z-index of the bar and make it less than the main content area while the z-index of the button is higher than both the bar and the content area.

Kindly provide the URL of the site in question so that we can check and provide a more concrete suggestion.

Thank you.

[ERES]

Okay, fair point. But with that in mind we could never use the left/right/bottom bar for something like that floating button. An option to set a bar “absolute” would be nice, like in the top bar.

[ruenel]

Hello @RSMG,

Please do not forget that you have the “Customize” tab for the bottom bar. You can still position your bar floating to the right having the width of your button. Find the “Customize” tab in your bar settings and insert this custom inline element css:

$el {
  max-width: 220px;
  right: 0;
}

Hope this helps.

[ERES]

Yes, thank you. That was the way I did it. I just thought I can build it out of the box without Custom CSS

[nabeel]

We’re glad we could help.

Cheers!