Pagination style shows on mobile menu (dawn theme)

Tolunay · ‎09-24-2024

I have an issue with my pagination style showing up in my menu. See picture:

I am currently using this code in theme.liquid underneath <head>

@keyframes progressAnimationStrike {
from { width: 0 }
to { width: 100% }
}
</style>

Can someone help me with this. 🙂

Moeed · ‎09-24-2024

Hey @Tolunay

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
slideshow-component.slider-mobile-gutter {
    z-index: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications

View solution in original post

Moeed · ‎09-24-2024

Hey @Tolunay

Share your Store URL and Password if enabled.

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications

Tolunay · ‎09-24-2024

https://svelt-amsterdam.com/nl

Password is not enabled

Moeed · ‎09-24-2024

Hey @Tolunay

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
slideshow-component.slider-mobile-gutter {
    z-index: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications

Tolunay · ‎09-24-2024

Again, Thank you very much! This worked perfectly as well.

Moeed · ‎09-24-2024

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications

Dan-From-Ryviu · ‎09-24-2024

Please update your code to this version

<style>
.slider-buttons .slider-counter__link {
margin: 1rem 4px !important;
padding: 0px !important;
width: 100px;
background: #ffffff33;
}
.slider-mobile-gutter .slider-buttons {
position: absolute;
left: 50%;
bottom: 10px;
z-index: 2;
border: unset;
transform: translate(-50%, 0px);
}
.slider-buttons .slider-button { display: none !important }
.slider-buttons .slider-counter__link--dots .dot {
border-radius: unset;
width: 10rem;
}
.slider-buttons .slider-counter__link {
padding: 1rem 4px;
}
.slider-buttons .slider-counter__link--dots .dot {
background: #ffffff3d;
}
.slider-buttons .slider-counter__link--active.slider-counter__link--dots .dot {
background: #fff;
transition: 0.4s linear;
transition-property: width, background-color;
width: 100%;
animation: progressAnimationStrike 6s;
}

@keyframes progressAnimationStrike {
from { width: 0 }
to { width: 100% }
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Pagination style shows on mobile menu (dawn theme)