DAWN THEME collapsible footer menu in-between lines

[TheMythGaming]

Hello everyone. I would like to have in-between lines to my footer menu on the mobile version like this one below.

This is mine. I would like the in-between line color to be the same as the email box.

Also, can the + and - icons be bigger? Thank you!

themythwys.com

 

[suyash1]

@TheMythGaming please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.footer-block__heading{border-bottom: 1px solid;}
.footer-block__newsletter .footer-block__heading{border-bottom:none;}

[TheMythGaming]

Thanks but not exactly what I'm looking for. I want it between, not below each menu.

[LizHoang]

Hi @TheMythGaming 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file styles.css and add this code at the end of the file

.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    border-bottom: 1px solid;
}

h2.footer-block__heading.inline-richtext {
    margin: 0 !important;
}

ul.footer-block__details-content.list-unstyled {
    margin: 10px !important;
} 

Result: 

Best,

Liz

[TheMythGaming]

@LizHoang Thank you. Almost perfect. How can I adjust it to the middle? and also put a line on the top? same as this one

 

[LizHoang]

Hi @TheMythGaming , you can add this code

@media (max-width: 768px) {
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in:first-child {
    border-top: 1px solid;
    padding-top: 25px;
}

.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
    border-bottom: 1px solid;
}

h2.footer-block__heading.inline-richtext {
    margin: 0 !important;
}

ul.footer-block__details-content.list-unstyled {
    margin: 10px !important;
} 
}

Result: 

[TheMythGaming]

@LizHoang Thank you again. One last thing, how can I make the lines aligned in the middle? 

 If you notice this, lines are even and are in the middle. Thank you.

[LizHoang]

Hi @TheMythGaming 

you can try add this code 

@media (max-width: 768px) {
h2.footer-block__heading.inline-richtext {
    text-align: center !important;
}
}

Result

[DaisyVo]

Hi @TheMythGaming 

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.footer-block--menu h2:after {
    font-size: 30px !important;
}
.footer-block--menu.open h2:after {
    font-size: 50px !important;
}
{% endstyle %}

I still don't quite understand your request
Currently I'm just providing code for making + and - icons larger on mobile

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team. 

[TheMythGaming]

Hello. I tried this but + and - is not aligned white the words.