How to add a close button to sticky foot banner?

Solved
New Member
3 0 0

Hi creative expert, tourists, and professionals,
Last week I made a sticky foot banner on my home page by writing the following code in the liquid script:

<div class="stick_img"><a href="my_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/banner.jpg?v=1576821060"></a></div>

as well as the following code in the css script:

.stick_img{position: fixed; bottom: 0; right: 0; z-index: 111;}

It looks great. However, I feel it a little bit like an obstruction if it cannot be closed. How could I add a close button like a "x" symbol wrapped by a small circle outside?
Looking to hearing from you, and wish you a Merry Christmas!
Best Regards,

Mike Friar

0 Likes

Success.

Shopify Partner
433 83 93

Hello Mike,

You need to add X in html like this

<div class="stick_img"><a href="my_url"><img src="https://cdn.shopify.com/s/files/1/0247/1749/2301/files/banner.jpg?v=1576821060"></a><spa class="close_btn">X</span></div>

And after to hide it use jquery, here you check 
Your jquery code will be like this

<script>
$(document).ready(function(){
  $(".close_btn").click(function(){
    $(".stick_img").hide();
  });
});
</script>

Note: you need to write css for X (close) to align it a/to your need 

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like