Dawn Theme - Remove icon in collapsible menu area

xnyjyh
Excursionist
143 0 6

I recently put a code for a collapsible menu for mobile only, but theres one unwanted icon that shouldnt be there as seen in picture. It has no function for the follow us section. How can this one icon be removed? The code is below the image.

remove icon.png

 

<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')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')

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>

Replies 5 (5)

PageFly-Richard
Shopify Partner
4079 913 1567

Hi @xnyjyh 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.grid .footer-block__heading::after,.grid .footer-block__heading:not(.block-collapsed)::after {
display: none !important;
} 
</style>

Or you can simply remove this part in your code 

PageFlyRichard_0-1703637922037.png

 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

xnyjyh
Excursionist
143 0 6

And this will just remove the one + icon where the red arrow shows on the image i have attached? Its the only one i want removed. the menu ones i want still.

 

remove icon.png

PageFly-Richard
Shopify Partner
4079 913 1567

Yes, if the code i mentioned is for that icon, it will be removed

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

xnyjyh
Excursionist
143 0 6

NO, it removed all the + icons. Just wanted the ONE icon removed for the FOLLOW HOWAH part. I need the + icon s for the other parts. See the image to see what i mean. ONLY the one with the red arrow i want removed.

remove icon.png

PageFly-Richard
Shopify Partner
4079 913 1567

That would be more easier if you can drop a link to that page 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.