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;
}