Stretchy Navigation Line - SS 7.0

Hi,

I'm trying to add the Stretchy Navigation Line from Ghost Plugins to my website (v7.0) but I can't find a way to make it work.

Any help would be greatly appreciated.

Thanks in advance.

Thank you very much @tuanphan, really appreciate your help.

Best regards.

On 7/22/2022 at 11:02 AM, tuanphan said:

Use this code

/* 70 stretch nav underline hover */
nav .nav-item a:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 0;
    z-index: 9999;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    transition: all 0.3s;
}
nav .nav-item a {
    position: relative;
}
nav .nav-item a:hover:after {
    width: 100%;
    transition: all 0.3s;
}

 

Hi again,

Do you know how to make the color of the underline follow the color theme of the menu ? 

All the best

19 hours ago, diaph said:

Hi again,

Do you know how to make the color of the underline follow the color theme of the menu ? 

All the best

I don't know this

Just now, tuanphan said:

I don't know this

Thanks for taking time answering anyway 🙂 

Did anyone find an answer to making the underline follow the the theme? Thank you!

Hi Ninahans:

This is for 7.0 - change the hex color #000000 below to the color you want.

 

// Stretchy Navigation Line //

.Header-nav-item::after {
  content: '';
  background: #000000; //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%;
}