Make a button float?

Shapely
1

Hello,

I am interested in seeing if it’s possible to make the button currently under the our services section of the website a floating button?

link: madmartialarts.com

2

Hey there

try this code:

a.btn.btn-lg.btn-white {
position: fixed;
left: 0px;
bottom: 20px;
}

that’s will make your button float,

3

Thank you this worked! The only problem is the background is transparent so it cannot be seen when scrolling through parts of the site with the same background color. Is there any way to add an opaque white background to the button? Thank you for all of your assistance with this.

5

Also, for some reason the button disappears when you get to the class schedule parallax section

6

hi

You may use this code instead:

a.btn.btn-lg.btn-white {
position: fixed;
left: 0px;
bottom: 20px;
background: #000;
z-index: 999;
}

8

Thank you this worked great! Is there a way to leave the button fixed to the current top of the page location we have it at only on mobile while keeping the floating capability on desktop?

I’d like to have it at the fixed position, but at the same location we have it at now as opposed to within the “Our Services” section.

9

Hi Tal

Yes, you may wrap the code in the media query:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

10

Thank you yes I’m aware of the media query, but what I am trying to sort out is currently the highest position I can get it to is the top of the our services section, I think bc this is the section the button is in. What I’m looking to adjust is moving up to the top portion of the first parallax, like we currently have on the desktop homepage. If you have any advice on anything I can enter into the CSS to adjust this, would greatly appreciate it. Thank you

11

Hi Tal

Sorry but this is not possible only with css, in this case you need more than custom css, it requires customization :slight_smile: