Custom NavBar Line Using an Icon

I want to add a custom "line" under the navbar page. In stead if a basic line when you are on each page, I'dd like to replace it with an icon. See attached. I figured out how to add an icon to the side oof each link, but not underneath when you click on the page.

Site isn't live yet.

Yes. Possible. If you share link to your site, we can help easier

https://cricket-poodle-pdnh.squarespace.com

On 6/3/2022 at 10:08 PM, NICOLELEIGH9 said:

https://cricket-poodle-pdnh.squarespace.com

Try adding to Design > Custom CSS. Replace with new image url

div.header-nav-item--active>a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
    background-size: cover;
    width: 100%;
    height: 5px;
    display: block;
}

On 6/10/2022 at 12:15 AM, tuanphan said:

Try adding to Design > Custom CSS. Replace with new image url

div.header-nav-item--active>a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
    background-size: cover;
    width: 100%;
    height: 5px;
    display: block;
}

 

Thank you! The original solid line also shows up with the image. Is there a way to replace that single line with only the image? See what appears when I added your code.

15 hours ago, NICOLELEIGH9 said:

Thank you! The original solid line also shows up with the image. Is there a way to replace that single line with only the image? See what appears when I added your code.

Add this code under

.header-nav-item a {
    background-image: none !important;
}

On 6/10/2022 at 12:15 AM, tuanphan said:

Try adding to Design > Custom CSS. Replace with new image url

div.header-nav-item--active>a:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg);
    background-size: cover;
    width: 100%;
    height: 5px;
    display: block;
}

 

Fantastic, thank you!