Adding Animations to Header

Store Design
, ,
1

Hey, I’d like to add two animations to my header.

  1. Smooth menu dropdown: When I hover over the menu item **“**Products,” I want the product menu to slide out with a smooth animation every time.

  2. Dot scaling animation: When you hover over any menu item, the dot appears instantly. I’d like to replace that with a short animation where the dot grows into place.

I’d like both animations to function like the ones on this store: https://tomnoske.store/

Here’s my store: https://1049xn-ya.myshopify.com/

Thanks so much for your help!
Tim

2 Likes
2

Hello @CreatorTim ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
body .header__menu-item:after {
    content: "" !important;
    background: #494949 !important;
    position: absolute;
    border-radius: 100%;
    width: 3px;
    height: 3px;
    left: 50%;
    bottom: 3px !important;
    transform-origin: center;
    transform: translate(-50%) scale(.25);
    opacity: 0;
    transition: none;
}
body .header__menu-item:hover:after {
    transform: translate(-50%) scale(1);
    transition: transform 1.1s cubic-bezier(.19,1,.22,1);
    opacity: 1;
}

body header-menu>details>.header__submenu {
    position: absolute;
    line-height: 22px;
    margin: 0;
    text-align: left;
    opacity: 0; 
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: center top;
    transform: scaleY(0) !important;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s 0.2s;
    overflow: hidden;
    pointer-events: none;
    animation: none !important;
}

body header-menu>details[open]>.header__submenu {
    z-index: 14;
    opacity: 1; 
    transform: scaleY(1) !important;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s;
    visibility: visible;
    pointer-events: all;
}
3

Hey, thanks for your help, but it only works for the dot.

The smooth menu dropdown on hover doesn’t work, so I’d really appreciate it if this could be fixed.

You can see how it works here: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim