Re: How to implement a floating link from a Multicolumn

How to implement a floating link from a Multicolumn

clleeber
Tourist
3 0 1

Hello,

 

I am trying to make a Multicolumn float over the page while scrolling down but I cant seem to find the write place on the code. 

I need the SHOP button to stay in the same place while the page moves. 

 

Anyone to help me please?

 

clleeber_0-1667988404105.png

 

This is the page live https://verdinha-co.myshopify.com/

Password: skavew

 

Thank you,

 

Replies 6 (6)

ExpertRookie
Shopify Partner
1518 249 321

@clleeber 

 

If it is CSS then you can add it to Theme > edit code > assets > base.css

if it is JS then you can add it to Theme > edit code > assets > global.js

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] regarding any help.
clleeber
Tourist
3 0 1

@ExpertRookie Thank you for you answer, I couldn't find it on base.css but I found it on assets > section-multicolumn.ccs.

 

I have changed the element ".multicolumn-card__info .link"  position to fixed and it kinda worked, now the column and its content is fixed on the page but when I scroll the page it goes under other elements. Any idea how could I fixed it? I have tried z-index but it doesn't seem to work.

 

Thank you

KetanKumar
Shopify Partner
37094 3645 12053

@clleeber 

can you please add multi column block and let you me know after i will guide scrolling 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
clleeber
Tourist
3 0 1

Sorry @KetanKumar , I am not sure if I understood what you asked me to do.

ExpertRookie
Shopify Partner
1518 249 321

Hi @clleeber 
You can try to remove the code that you added and try to use this code.

#shopify-section-template--16877186908449__multicolumn-3 {
position: sticky;
top: 0;
z-index: 9;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on [email protected] regarding any help.

NguyenVu
Tourist
9 0 3

I have found a free app on Shopify's public app store called Pronavi: https://apps.shopify.com/pronavi-navigation-design , which allows you to easily add and customize the bottom bar of your website. 

 

Frame 197.png