Jump to content

Changing the underline of the navigation bar to custom image

Recommended Posts

  • Replies 5
  • Views 570
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

 

Boehm_Nav_bar.png

Edited by jboehm
Link to comment
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.

 

Boehm_Nav_bar.png

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;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

 

 

Screenshot 2022-10-17 at 18.18.42.png

Edited by jboehm
Link to comment
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.

 

 

Screenshot 2022-10-17 at 18.18.42.png

I updated new code. You can check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.