Jump to content

How to animate links within a coded hamburger menu

Recommended Posts

Posted

I'd like to animate my main nav links like the text links on the rest of the site but can't figure out how to make that work within my coded hamburger menu.

My current link styling uses '.sqs-block-html' before the 'a'. When I remove this, it applies to the nav items, however since the width is set to 100%, the animated underline spans the width of the full page, rather than just the text link. 

Additionally, I'd like to change the effect of the active link from an underline to a color. 

 

Here's my code:

//MAIN NAV - BURGER//
.header-burger { 
  display:flex!important;
}
.header--menu-open .header-menu {
  opacity: 1!important;
  visibility: visible!important;
}
.header-nav, .header-actions {
  visibility:hidden!important;
}
.header-menu-bg {
  background-color: transparent!important;
background-image: url(https://static1.squarespace.com/static/65010a6ac8fb780f53c6c122/t/657793b141583135cadc91cf/1702335413616/AdobeStock_285630545.jpeg);
background-size: 1600px;
}
.header-menu-nav {
  text-align: center!important; 
  margin-left: 0%!important;
}
.header-menu-nav a:hover {
    color: #897b4e !important;
}

 

//LINK HOVER STYLING//
  .sqs-block-html a {
  position: relative;
    text-decoration: none;
}
.sqs-block-html a::before {
    content: '';
  position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: #b2997b;
    bottom: -3px;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }
.sqs-block-html a:hover::before {
  transform-origin: center;
  transform: scaleX(1);
}

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.