Jump to content

studiovesper

Member
  • Posts

    2
  • Joined

  • Last visited

Reputation Activity

  1. Like
    studiovesper got a reaction from EdnaNation in How to animate links within a coded hamburger menu   
    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 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.