Jump to content

EnrichedEducator

Member
  • Posts

    22
  • Joined

  • Last visited

Community Answers

  1. EnrichedEducator's post in Highlight Current Page/Folder in Navigation Bar - Brine was marked as the answer   
    Hi, I know I am very delayed in my response, but here is the code I am using. Since my original post, I have made some additional updates to my navigation bar.  I've pasted my updated code below. I hope this helps!
    //NAVIGATION BAR// // Hide index link from nav bar // a[href="/sip-the-tee-1"]{pointer-events: none;}; a[href="/about-nav"]{pointer-events: none;} a[href="/what-we-do-1"]{pointer-events: none;} //static floating header// .Header {border-bottom: 2px solid gray;} @media screen and (min-width: 768px) { .Header {position: fixed; z-index: 9999; width: 100%; top: 0px;} .Content-outer {margin-top: 100px;} } //--- Add a border between links: .Header-nav-folder a {border-bottom:1px dotted gray} //--- Increase the space between links: .Header-nav-folder a {padding-bottom:.5rem!important; } //--- give drop down list a shadow: .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.5)} .Header-nav-folder{background-color:white!important} //--- active link highlight---// .Header-nav-item {margin: 10px!important; padding: 5px!important;} .Header-nav-item:hover {border: 2px solid #990000!important;} .Header-nav-item.Header-nav-item--active {background: #990000!important; color: white!important} .Header-nav-folder-title.Header-nav-folder-title--active{ color: white!important; background-color: #990000; padding-left: 6px; padding-right: 5px; border: 4px solid #990000; margin-left: -5px!important; margin-right: -5px; margin-top: -2px;} //--- grey highlight folder link on hover---// .Header-nav-folder-item:hover {background-color: #e7e6e6!important}  
×
×
  • 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.