Hover state on mobile menu

Site URL: https://lightsandtracks.squarespace.com/

Hi there, 
 

Site password: lightsandtracks

I am finalising a client site and need assistance with two items:

1. I have set up the menu to be the burger menu at all sizes. However, I can only get the hover state to work on one line of the bun, not both – I've tried everything! Does anyone know how to get the hover state to work on the full menu? 

2. I have added an arrow to show on the menu items on hover - I'd love to add a transition to this hover so the arrow appearing is smoother. Does anyone know how to do this? 

Thanks so much!

Ash

I have the same question if anyone knows, or if you figured it out? Thanks!

@SpeckleDigital I'm assuming you have this solved. When I visited the site, I see a hamburger menu that goes from 2 black lines to 2 orange ones on hover, and arrows which grow in size as I hover over its menu items.

On 1/8/2021 at 4:34 AM, cmcdd said:

I have the same question if anyone knows, or if you figured it out? Thanks!

Can you share site url. We can help easier

I asked this question as part of another query that I submitted and I received the following response that I wanted to share on this thread:

After using the dev tool in this site https://lightsandtracks.squarespace.com/, i think this is the configuration to set hover effect.

.header-menu-nav-item a:hover {
    color: #ff524a !important;
}

a:hover {
    color: #ff524a !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.header-menu-nav-item a:hover::after {
    content: '→' !important;
    font-size: 3.2rem;
    color: #ff524a;
    font-family: 'FunktionalGrotesk-Book';
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    opacity: 1 !important;
}