How to fix footer menu overlap on my website?

Store Design
, ,

Topic summary

A user reports footer menu navigation items overlapping and becoming unreadable on their website (NEWJRSY.co).

Proposed Solutions:

Two community members offered CSS-based fixes:

  • Solution 1: Add custom CSS targeting mobile screens (max-width: 767px) to remove bottom margins from footer list items. Code should be inserted before the </body> tag in theme.liquid.

  • Solution 2: Add CSS to adjust padding for both desktop and mobile views. Targets .site-footer, .no-bullets.site-footer__linklist, and page width containers. Code should be added to the theme’s CSS file (theme.css, styles.css, or base.css).

Both solutions involve editing theme files through Shopify admin → Online Store → Themes → Edit code.

Status: The issue remains unresolved as the original poster has not confirmed whether either solution worked. Images were shared showing expected results but appear corrupted in the thread.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hi,

need some help my footer menu overlaps and you can’t see the navigation. My site is NEWJRSY.com

71AE8349-C2D7-4B58-A9F4-DC9C98E3E828.jpeg
71AE8349-C2D7-4B58-A9F4-DC9C98E3E828.jpeg1170×2532 152 KB

2 Likes
2

@Luxurymrkt

Hello,

Please add the below code above in theme.liquid

online store >> edit code >> theme.liquid

@media only screen and (max-width: 767px){ footer.site-footer .site-footer__linklist li{ margin-bottom: 0!important; } }

after added the given code looks like this.

shreyhweb_0-1686590466960.png
shreyhweb_0-1686590466960.png570×932 42.6 KB

If our solution is helpful for you then Please like the post and tap on accepted.

If you want to discuss any further information then please contact us on our whatsapp.

We will always here for your help.

Thankyou :slightly_smiling_face:

1 Like
3

Hi @Luxurymrkt ,

I understand that you want to fix the double words.

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.css, styles.css or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
ul.no-bullets.site-footer__linklist {
    line-height: 2px;
}
.site-footer {
    padding-top: 100px;
    padding-bottom: 30px;
}
@media only screen and (max-width: 768px) {
    .page-full, .page-width {
    padding-top: 80px;
}
}