Collapsible footer menu in-between lines ( Dawn Theme )

Store Design
, , , , , , , ,
1

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

482426181_678278741530920_7976853010447069291_n.jpg
482426181_678278741530920_7976853010447069291_n.jpg1080×1500 67.6 KB

This is mine.

481869073_598228630035599_3131448986417098368_n.jpg
481869073_598228630035599_3131448986417098368_n.jpg1080×1812 92.9 KB

Please help me. Thank you.
https://dream-candle-lights.myshopify.com/

Password: Admin

2

Hi @dreamtechzone_5 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

@media screen and (max-width:750px){
.footer-block__details-content > li {
     border-top: 0.5px solid #fff !important;
}
}

Screenshot_13.png
Screenshot_13.png372×799 47 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hello @dreamtechzone_5 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media screen and (max-width:768px){
ul.footer-block__details-content.list-unstyled li {
    border-bottom: 1px solid #ffffff !important;
}
}

ZestardTech_0-1741335060291.png
ZestardTech_0-1741335060291.png323×602 19.5 KB

Let me know if you need further assistance!

1 Like
4

I don’t want to add lines below the menu. I want to add lines below the heading. I want to add lines above and below the Quick Shop, Information, Faq’s

5

@dreamtechzone_5 ,
Code update to add lines above and below the Quick Shop, Information, Faq’s:

@media screen and (max-width:750px){
.footer-block.grid__item.footer-block--menu:not(:first-child) {
     border-top: 0.5px solid #fff !important;
}
}

Screenshot_14.png
Screenshot_14.png737×886 63.2 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

1 Like
6

Thank you. I want to add a line above Quick Shop as well.

7 
@media screen and (max-width:750px){
.footer-block.grid__item.footer-block--menu {
     border-top: 0.5px solid #fff !important;
}
}

Try this code @dreamtechzone_5

1 Like
8

It worked. Thank you very much.

Can the footer section be kept like this? Newsletter form and icons. Can the footer section be designed in exactly the same way?

Screenshot (83).png
Screenshot (83).png1887×640 46.3 KB

9

Hi @dreamtechzone_5 ,
Sorry, but modifying the footer this way requires changes in the Liquid file. It is very difficult to adjust using regular CSS.

1 Like
10

Okay, Is it possible to just change the style of the newsletter form and keep the newsletter form on top?

11

The newsletter does not need to be changed. Can only the newsletter be placed on the top line? And the line above the newsletter can be added in mobile mode. Please help me sir. Thank you.