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

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!


Link to comment

4 answers to this question

Recommended Posts

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