How can I remove animation of all buttons? (theme Yuva)

Store Design

Topic summary

A user sought help removing button animations and adjusting navigation bar spacing in the Yuva theme.

Initial Solutions Attempted:

  • First response suggested adding CSS code to theme.liquid before </head> tag
  • User reported the code displayed as plain text instead of executing

Working Solution:
Multiple contributors provided alternative approaches:

  • Adding CSS via Custom CSS section (Sales channels > Online Store > Themes > Customize > Theme settings)
  • Wrapping code in proper <style> tags when inserting into theme.liquid

Key CSS fixes included:

  • Removing button hover animations: .button:before { transition: unset !important; }
  • Increasing navigation spacing: adjusting padding values for .nav-item .nav-link

Resolution: User confirmed one of the solutions worked successfully. The issue stemmed from improper code implementation rather than incorrect CSS—the code needed to be wrapped in <style> tags or added through the theme customizer’s CSS section.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I have two questions:

  1. How to remove the animations of all buttons? The theme is Yuva.
  2. How to change the vertical spacing of the navigation bar? Now it seems very crowded.

OneChefOn_0-1750228037930.png
OneChefOn_0-1750228037930.png1862×591 215 KB

Store URL if needed: 5c252b-bc.myshopify.com

2

Hello OneChefOn,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before
  1. Below code is for vertical spacing of the navigation bar
.nav__header ul.navbar-nav.list-menu--inline { padding: 10px 0;}
  1. remove the animations of all buttons
.button:hover {color: #fff;}
.button::before, .button::after {background-color: transparent;}
3

I tried your method, but it didn’t work. The added code was directly displayed.

OneChefOn_0-1750229263119.png
OneChefOn_0-1750229263119.png1852×574 65.8 KB

OneChefOn_1-1750229318060.png
OneChefOn_1-1750229318060.png1859×486 43 KB

4

Hi @OneChefOn

Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings to remove animation and add more vertical space for your menu.

.button,
.button:before { transition: unset !important; }
html .header_2 .nav-item .nav-link, 
html .header_4 .nav-item .nav-link { padding: 12px 30px 12px 0; }
5

Replace below code
1 Like
6

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

AnneLuo_0-1750230394746.png
AnneLuo_0-1750230394746.png1215×223 45.9 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

1 Like
7

It worked. Thank you very much.

1 Like