Changing the underline of the navigation bar to custom image

Site URL: http://josef-boehm.com

Hello, 

I'd like to change the underline under the active navigation bar to a custom image. I would be very thankful for tips.

The password is: bhmtst

Thanks in advance.

What image do you want to use, how do you want it to appear?

I attached the image i would like to use. Although I am quite sure I'd need to change the scale etc. Basically i want to replace the original underline with this custom one. So the image should be under the active navigation item.

On 10/12/2022 at 7:43 PM, jboehm said:

I attached the image i would like to use. Although I am quite sure I'd need to change the scale etc. Basically i want to replace the original underline with this custom one. So the image should be under the active navigation item.

 

https://www.josef-boehm.com/about

Add to Design > Custom CSS

div.header-nav-item--active a:after {
    content: "";
    background-image: url(https://content.invisioncic.com/p289038/monthly_2022_10/Boehm_Nav_bar.png.10c1eec3e1dac989bf1213662523f9be.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 30px !important;
    height: 10px !important;
    transform: unset !important;
    bottom: -10px !Important;
}
div.header-nav-item--active a {
    background-image: none !important;
}

Thank you very much for taking the time!

I just have a few small issues left. The image does not appear centered beneath the active item and the original underline is still visible. I attached a screenshot of the issue. (I adapted the pixel values a bit: width: 40px;  height: 4px;   bottom: -5px;)

Once again, thank you for your help. I really appreciate it.

On 10/17/2022 at 11:27 PM, jboehm said:

Thank you very much for taking the time!

I just have a few small issues left. The image does not appear centered beneath the active item and the original underline is still visible. I attached a screenshot of the issue. (I adapted the pixel values a bit: width: 40px;  height: 4px;   bottom: -5px;)

Once again, thank you for your help. I really appreciate it.

 

 

I updated new code. You can check it again