Mobile view Divider / Separator lines between accordions in the footer menu (Dawn Theme)

[bellevo]

Hey, is there a way to add dividers / separator lines between the accordions in the footer menu, only for the MOBILE view? I will add a picture below of the issue and the desired outcome. I would appreciate any help with this issue! Thank you in advance.

My store url: https://bellevodesign.com/

The issue:

The desired outcome:

[BSSCommerce-B2B]

Hi @bellevo ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 749px) {
    h2.footer-block__heading.inline-richtext,
    ul.footer-block__details-content.list-unstyled li {
        border-bottom: 1px solid #cccc;
    }
}

In this step, you can change the color of boder-bottom as you want.

Step 3: Save your code and reload this page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

[BSSCommerce-HDL]

Hi @bellevo ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

@media only screen and (max-width: 767px) {
  h2.footer-block__heading.inline-richtext.block-collapsed::after {
    content: '';
    position: absolute;
    transform: translateY(23px);
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: white;
  }
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[bellevo]

Hey, for some reason it didn’t work! Also if it is possible I would only like the outlines on the “Headers” so when you open the accordion there wont be underlines, I will add a picture of what I mean.

[bellevo]

Hey, this just puts the code on top of the header :/. Thank you though.

[BSSCommerce-B2B]

Hi @bellevo ,

You can try add !important for this css script:

.footer-block__heading.inline-richtext {
    border-bottom: 1px solid !important;
}

Hope it helps.

[bellevo]

Hey, still no underline unfortunately. Thanks though.

[Made4uo-Ribe]

Hi @bellevo

check this one

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

@media (max-width: 749px) {
h2.footer-block__heading.inline-richtext.block-collapsed, h2.footer-block__heading.inline-richtext {
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}
.grid .footer-block__heading::after {
    right: 0px;
}
}

• And Save.

• Result:

• 

  It seems like your missing some - sign here. When it opens

• 

[bellevo]

Hey, for some reason this doesn’t work either. I don’t really understand why none of these codes work as it seems to work on your screen.

[bellevo]

Here is the full code for the dropdown menus maybe you can figure it out by seeing it.

@media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; margin-left: -15px; padding: 1.5rem 0; cursor: pointer; font-size: 14px; } .grid .footer-block__heading::after { content: "+"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; font-size: 20px; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; font-size: 35px; } .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; margin-left: -15px; } }

[Made4uo-Ribe]

Can you add in the custom css on the theme editor, click the footer and find this one on the right side.

Paste the code here and save.

[bellevo]

Works perfectly. You are an absolute life saver, thank you!! I have one more question, is there a way to make the divider / separator line underneath the accordions the same size / color as the ones within the accordions. Thank you once again!