DAWN THEME collapsible footer menu in-between lines

Store Design
,
1

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

IMG_1492.jpg
IMG_1492.jpg1320×965 37.3 KB

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

IMG_1494.jpg
IMG_1494.jpg1320×1185 38.8 KB

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

2

@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;}
3

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:

LizHoang_0-1740026919149.png
LizHoang_0-1740026919149.png372×660 13.4 KB

Best,

Liz

4

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

5

@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

IMG_1492.jpg
IMG_1492.jpg1320×965 37.3 KB

6

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:

LizHoang_0-1740027637162.png
LizHoang_0-1740027637162.png372×461 9.5 KB

7

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

IMG_1492.jpg
IMG_1492.jpg1320×965 37.3 KB

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

8

Hi @TheMythGaming

you can try add this code

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

Result

LizHoang_0-1740038303969.png
LizHoang_0-1740038303969.png452×623 15.7 KB

9

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 tag and add the following code above 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.

10

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