How to add a scroll button on mobile view footer using Sense theme?

[purwajmiyani]

I am using Sense theme where I face problem that on able to put drop button for the contacts policies in the footer for the mobile view.

[Dan-From-Ryviu]

Hi @purwajmiyani 

This article may help you with this 

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

[purwajmiyani]

Hi @Dan-From-Ryviu 

I think I didn't explain well for the problem.

My problem is in the footer where we add details like policies, contact us, etc there I need a drop option as it is my menu and on drop down sub menu will display. 

[deepaksharma]

Hi @purwajmiyani 

I think you need something like this

 

This feature is not available in the sense theme, but worry not you can still get that feature in to your store.

You will have to utilize the built-in collapsible content to render your menu in the footer similar to this.

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

 

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

 

[Dan-From-Ryviu · Accepted solution]

Hi @purwajmiyani 

You can add those code to your theme.liquid file before </html>, save file and check if its correct

<style>
@media (max-width: 749px) {
  .grid .footer-block.grid__item {
    margin: 0;
  }
  .grid .footer-block__heading {
    position: relative;
    margin: 0;
    padding: 1.5rem 0;
    cursor: pointer;
  }
  .grid .footer-block__heading::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    text-align: center;
  }
  .grid .footer-block__heading:not(.block-collapsed)::after {
    content: "-";
  }
  .grid .footer-block__heading.block-collapsed + .footer-block__details-content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    transition: all .2s ease-out;
    overflow: hidden;
  }
  .grid .footer-block__heading + .footer-block__details-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition: all .2s ease-out;
    overflow: hidden;
    margin-bottom: 3rem;
  }

}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
  if (window.matchMedia('(min-width: 750px)').matches) {
    return
  }

  const handleCollapse = (heading) => {
    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed')
      heading.setAttribute('aria-expanded', 'true')
    } else {
      heading.classList.add('block-collapsed')
      heading.setAttribute('aria-expanded', 'false')
    }
  }
  
  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    heading.classList.add('block-collapsed_new')
    heading.setAttribute('role', 'button')
    heading.setAttribute('aria-expanded', 'false')
    heading.setAttribute('tabindex', '1')

    heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
    heading.setAttribute('aria-controls', `footer-block-index-${index}`)

    heading.addEventListener('click', () => { handleCollapse(heading) })
    heading.addEventListener('keypress',  () => { handleCollapse(heading) })
  })

})
</script>

[purwajmiyani]

@Dan-From-Ryviu Thank you for the help its working properly.

[Dan-From-Ryviu]

Happy I could help