Jump to content

Hover state on mobile menu

Recommended Posts

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!


Link to comment
  • 3 months later...
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
  • 9 months later...

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.