Jump to content

Add the underline CCS code on Main Nav

By chininicklee, in Other

Go to solution Solved by Web_Solutions,

Recommended Posts

chininicklee Level 2

chininicklee

Posted
Posted

Hi everyone, 

In my navigation, I'm having trouble adding an underline. 

I am using Squarespace 7.1. My main navigation is About, Work, and Contact. I'm building each of them with Blank Page. 

Several of my projects are showcased on my Work page. My project page was built using Blank Page and added to the Not Linked section, so it won't appear on the main navigation.

The problem I have is that when people click on the projects on the Work and it takes them to their own page, I would like the underline to remain on the Work in the main navigation.  

The project needs a Work underline.
URL SLUG
/gains-speed-in-the-cloud

Work page
URL SLUG
/work

Can the CSS code be added to make it happen?

I attached two images one is on the Work page, another is Gains Speed in the Cloud project page which needs the underline on the main nav.

Best
Chin
 

Screen Shot 2023-10-17 at 4.16.16 PM.png

Screen Shot 2023-10-17 at 4.15.18 PM.png

Link to comment
  • Replies 7
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

chininicklee Level 2

chininicklee

Posted
  • Author
Posted

Hi Tuanphan, 

I appreciate your help. The site is still in private mode. Here are the links I have so far. Let me if you need me to provide more info. My page structure is also attached as a screenshot. 

Main Nav - About
https://pentagon-tuba-td5r.squarespace.com/about

Main Nav - Work
https://pentagon-tuba-td5r.squarespace.com/work

Main Nav - Contact
https://pentagon-tuba-td5r.squarespace.com/contact


If people are in either of the following projects, I would like the underline to be active on Work

https://pentagon-tuba-td5r.squarespace.com/defy-logic-mercedes-sf

https://pentagon-tuba-td5r.squarespace.com/at-the-point-of-possibility

https://pentagon-tuba-td5r.squarespace.com/siemens-factory-automation-ai

https://pentagon-tuba-td5r.squarespace.com/galaxy-s20-ultimate-bright-night-challenge

https://pentagon-tuba-td5r.squarespace.com/gains-speed-in-the-cloud

Screen Shot 2023-10-21 at 3.49.01 PM.png

Link to comment
Web_Solutions Level 12

Web_Solutions

Posted
Posted
6 hours ago, chininicklee said:

Hi Tuanphan, 

I appreciate your help. The site is still in private mode. Here are the links I have so far. Let me if you need me to provide more info. My page structure is also attached as a screenshot. 

Main Nav - About
https://pentagon-tuba-td5r.squarespace.com/about

Main Nav - Work
https://pentagon-tuba-td5r.squarespace.com/work

Main Nav - Contact
https://pentagon-tuba-td5r.squarespace.com/contact


If people are in either of the following projects, I would like the underline to be active on Work

https://pentagon-tuba-td5r.squarespace.com/defy-logic-mercedes-sf

https://pentagon-tuba-td5r.squarespace.com/at-the-point-of-possibility

https://pentagon-tuba-td5r.squarespace.com/siemens-factory-automation-ai

https://pentagon-tuba-td5r.squarespace.com/galaxy-s20-ultimate-bright-night-challenge

https://pentagon-tuba-td5r.squarespace.com/gains-speed-in-the-cloud

Screen Shot 2023-10-21 at 3.49.01 PM.png

Your website Private now. Can you make your website password protected and share the password?

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
Web_Solutions Level 12

Web_Solutions

Posted
  • Solution
Posted
1 hour ago, chininicklee said:

Hi Web_Solutions

Thank you for helping out. The pw for the site is CSS-Developer

 

 

 

Here is the code. You need add the code on each project page. I have attached a screenshot where you will add the code. Page setting > Advanced 

<style>
  .header-nav-item [href="/work"], .header-menu-nav-item [href="/work"] .header-menu-nav-item-content {
    background-image: linear-gradient(currentColor,currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
  }
  .header-menu-nav-item [href="/work"] .header-menu-nav-item-content {
    background-position: 0 100% !important;
  }
</style>

 

Screenshot_282.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
Web_Solutions Level 12

Web_Solutions

Posted
Posted
7 minutes ago, chininicklee said:

Hi Web_solution

Thank you for the quick response. The code works pretty well. 

Welcome!

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer
☕Am I helpful? Want to offer me a coffee?
✉ Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources