How To Move The Word 'Instagram' Beside Country/Region Selector In Footer For Mobile

Solved

How To Move The Word 'Instagram' Beside Country/Region Selector In Footer For Mobile

MMast
Trailblazer
182 1 25

Thanks in advance!

I am looking to move the word 'Instagram' to be aligned and beside the country/region selector in the footer section on mobile only. Example shown below.

Screenshot 2024-06-28 121106.png

Accepted Solutions (2)

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @MMast, Pls insert this code before </head> tag on theme liquid: 

@media screen and (max-width: 767px) {
  .footer-block--newsletter.scroll-trigger.animate--slide-in {
    position: absolute;
    z-index: 99;
    right: 15px;
    margin-top: 55px;
  }
}

Hope this can help you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @MMastPls insert this code before </head> tag on theme liquid: 

body:has(.menu-drawer-container.menu-opening) .footer-block--newsletter.scroll-trigger.animate--slide-in{
   z-index: -1;
}

Hope this can help 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 7 (7)

techlyser_web
Shopify Partner
1770 327 355

Hello @MMast 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in {
position: absolute;
right: 36px;
margin-top: 57px !important;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
position: relative;
}
}
</style>

techlyser_web_0-1719591820045.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
MMast
Trailblazer
182 1 25

It displays far away and the word is not clickable anymore.

IMG_0837.jpeg

techlyser_web
Shopify Partner
1770 327 355

sorry for mistake

please remove my given code, I will try to give you another code
Thanks

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @MMast, Pls insert this code before </head> tag on theme liquid: 

@media screen and (max-width: 767px) {
  .footer-block--newsletter.scroll-trigger.animate--slide-in {
    position: absolute;
    z-index: 99;
    right: 15px;
    margin-top: 55px;
  }
}

Hope this can help you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
MMast
Trailblazer
182 1 25

Is there a way to remove it from showing up in the drop down menu? 

IMG_0839.jpeg

BSSCommerce-HDL
Shopify Expert
1004 342 408

This is an accepted solution.

Hi @MMastPls insert this code before </head> tag on theme liquid: 

body:has(.menu-drawer-container.menu-opening) .footer-block--newsletter.scroll-trigger.animate--slide-in{
   z-index: -1;
}

Hope this can help 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-HDL
Shopify Expert
1004 342 408

@MMast, We are happy to help you solve the problem. Have a good day 😍

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency