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 ✅

- Get a quick Shopify quote – Click here!

- 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 ✅

- Get a quick Shopify quote – Click here!

- 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 ✅

- Get a quick Shopify quote – Click here!

- 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 ✅

- Get a quick Shopify quote – Click here!

- 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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Pagination style shows on mobile menu (dawn theme)