Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation bar: Keep parent folder hover active when hovering children items (Dropdown Menu)


TOMweb

Question

Hi team!

I am trying to customise my header on Squarespace 7.1: I have 2 folders item (parent) and a few children item for each in a Dropdown Menu (folder content). I have used a code to create an animated underline effect when I hover only the parent folder (not the folder content), but I would like that effect to stay active only on the parent folder when I hover the folder content.

When I hover the folder content, I'd like the folder parent animation to stay on hover too. Does that make sense?

 

Here is the custom CSS that I used for that section

 

/*Nav Item Animated Line when hover*/
nav a:hover {
    background-size: 100% 2px !important;
}
nav a {
  padding-bottom: 6px;
  overflow: visible !important;
background-repeat: no-repeat !important;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important;
    background-size: 0% 2px !important;
    background-position: 0% 100% !important;
    white-space: initial;
transition: all ease-in-out 500ms !important;
-ms-transition: all ease-in-out 500ms !important;
-moz-transition: all ease-in-out 500ms !important;
-webkit-transition: all ease-in-out 500ms !important;
}
/*Transparent dropdown background */
.header-nav-folder-content {
   background: transparent !important;
  a {
   background: none !important;
}
}
/*Nav Folder Dropdown Fade In*/
.header-nav-folder-content {
  transition: all 0.5s ease-in-out !important;
}
.header-nav-folder-content:hover {
  transition: all 0.5s ease-in-out !important;
}

Edited by remia06
Privacy
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

Thanks for this, works perfectly. 

For Brine 7.0 its the following code:

/* Hover underline */
  .Header-nav-item.Header-nav-item--folder:hover > a {
      background-size: 100% 2px !important;
  }

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...