Jump to content

Header Nav Folder to center text on hover

Recommended Posts

I'm trying to get my code to hover under the folder text and not the folder itself (under commercials)

image.thumb.png.cb1ea801a535cc50d724e0adbb098e92.png

I took the code from here and added another code for the lines to show up under the folder: https://www.ghostplugins.com/steps/8gk3nf7j

 

Here's the code I have so far

// Stretchy Navigation Line - v2 //
.header-nav-item::after {
  content: '';
  background: #FFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}

.header-nav-folder-item::after {
  content: '';
  background: #FFF; //color
  height: 2px; //thickness
  width: 0;
  display: block;
  margin-top: 2px !important;
  transition: width 1s; //animation speed
  margin: 0 auto;
}
.header-nav-item:hover::after {
  width: 100%;

}
.header-nav-folder-item:hover::after {
  width: 75%;
}

Please help! thank you

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

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.