Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hover state on mobile menu


SpeckleDigital

Question

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

Link to comment

4 answers to this question

Recommended Posts

  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;
}
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...