Footer Menu Upper Line Doesnt Appear on Mobile

Footer Menu Upper Line Doesnt Appear on Mobile

berkeyazer
Excursionist
31 2 6

Hello Dears,

 

I would lilke to ask your help to add an upper line to my footer menu in mobile version.

I have it for desktop version but it does not appear on mobile, please see below example line.

I would like to put the same one to the location of red dots.

 

https://7hills.shop/

yellow123456789x

 

 

berkeyazer_0-1719147091692.png

berkeyazer_1-1719147161151.png

 

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
2305 834 907

Hi @berkeyazer

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

BSSCommerceHDL_0-1719147658288.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1719147663667.png

Step 3: Insert the below code at the bottom of the file -> Save

 

@media only screen and (max-width: 767px) {
  .footer__column.footer__column--info {
    position: relative;
  }

  .footer__column.footer__column--info::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 1px;
    background-color: black;
  }
}

 

Here is result: 

BSSCommerceHDL_2-1719147699883.png

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 😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Spac-es
Shopify Partner
406 119 154

Add this code in your base.css file:

.footer__content-top.page-width {
  border-top: 1px solid #00000036;
}

Result:

result.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
berkeyazer
Excursionist
31 2 6

Hello Dear @Spac-es, I tried but it did not work.

 

berkeyazer_0-1722088912537.pngberkeyazer_1-1722088929954.png

 

Spac-es
Shopify Partner
406 119 154

Don't worry!
Add !important to the style code so that it takes precedence over other CSS styles in the document.
It should be resolved if you do that!

.footer__content-top.page-width {
  border-top: 1px solid #00000036 !important;
}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!