I need some theme customizations

Store Design
,
1

Hi, how to change these two things in my shop?

  1. On mobile i have a custom menu slider on the homepage, how to do it full width, now it has the normal page margins left and right

Bildschirmfoto 2025-11-02 um 16.50.11
Bildschirmfoto 2025-11-02 um 16.50.11552Ă—106 11.5 KB

  1. On desktop I copied the old footer legal menu list but now its full width, how to make all 3 sections horizontal next to each other, now they are over each other?

I use the horizon theme and shop url is: www.pantherposters.com

Thank you!

2 Likes
2

For your mobile scroll menu paste this into “Custom CSS” setting of this section:

.mobile-scroll-nav {
  grid-column: 1/-1;
}

Not quite sure i see the other problem though. A screenshot would help here.

4

@nojushh

This is the first solution for the mobile scroll menu.

Please add the following code at the bottom of your css file.

section#shopify-section-template--26960898654546__mobile_scroll_menu_hpJDJC {
    --full-page-grid-with-margin: 0px;
    --full-page-grid-margin: 0px;
    --full-page-margin-inline-offset: 0px;
}

Please check if this works.

5

@nojushh

As for the 2nd point. It needs to customize your footer code in order to achieve your desired result.

6

Hi,

Hope this will help

  • For Mobile homepage menu slider → make it full-width

Get your slider’s section ID

Use following css and change the id

/* Make the home menu slider full-bleed on mobile only */
@media (max-width: 749px){
  #SHOPIFY-SECTION-ID-HERE .page-width,
  #SHOPIFY-SECTION-ID-HERE .container,
  #SHOPIFY-SECTION-ID-HERE .content-container {
    /* stretch edge-to-edge */
    width: 100vw;
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
    /* center the 100vw block inside the page */
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* If your slider itself has inner padding/margins, flatten them */
  #SHOPIFY-SECTION-ID-HERE .slider,
  #SHOPIFY-SECTION-ID-HERE .swiper,
  #SHOPIFY-SECTION-ID-HERE .flickity,
  #SHOPIFY-SECTION-ID-HERE .splide {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
  • Desktop footer legal menus → show 3 sections side-by-side

At footer liquid

Wrap your three legal lists

Code example

<div class="footer-legal-row">
  {%- comment -%} Your three legal menus start {%- endcomment -%}
  <!-- Example: -->
  <ul class="legal-list-1">
    <!-- your links -->
  </ul>
  <ul class="legal-list-2">
    <!-- your links -->
  </ul>
  <ul class="legal-list-3">
    <!-- your links -->
  </ul>
  {%- comment -%} Your three legal menus end {%- endcomment -%}
</div>

Add css to style the row