Jump to content

Custom Header Nav Button

Recommended Posts

Hi all-

I'm currently working on a site where I'd like to edit each individual button, I'm working with squarespace 7.1. Mainly, I'd like to make my header nav button smaller and have it outlined while I have the rest of my buttons filled with color, potentially adding some hovering effects to one in particular. I have some custom CSS I've been using, it works great when I edit, but when I toggle to preview or between different tabs, my header nav button breaks. Any help or tips would be appreciated! My CSS I'm using is below.




.header-actions-action .btn {
    padding: 10px 30px;
    font-size: 12px;
    color: #4E07E6 !important;
    background: #fff !important;
    border-color: violet !important;
.sqs-block-button-element--large:hover {background-color:#4E07E6; color:#fff}


Link to comment
  • Replies 1
  • Views 934
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

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