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