Jump to content

Remove underline on navigation and drop down

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 12
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

On 12/25/2022 at 4:55 AM, MelPal said:

When I'm on a page, the menu item and item in the dropdown that links to that page is underlined. Is it possible to remove that? I attached a screenshot.

 

 

 

Screenshot 2022-12-24 at 1.55.18 PM.png

Can you share your URL site so I can take a look? some custom Css code can work around it

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Add these code on Custom CSS Section

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
}

 

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
2 hours ago, Web_Solutions said:

Add these code on Custom CSS Section

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
}

 

Thank you. This removed the underline from the folder item, but not from the folder itself. Any thoughts?

Link to comment
4 hours ago, MelPal said:

Thank you. This removed the underline from the folder item, but not from the folder itself. Any thoughts?

I check that it is fine now. Do you still need help?

image.png.28cb8df49bc25d7f5b1dc7c0f1c00ee5.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Add this code

.header-nav-folder-item--active .header-nav-folder-item-content, .header-nav-folder-item--active .header-nav-folder-title {
  background: none !important;
}

 

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

Thank you. I added this code as well but it's still not working. The first image here shows how on the homepage there is no underlining and the item I am hovering over becomes bold and turns blue, but then in the second image you can see that when I'm on the history page itself, the "About" folder is still underlined and the menu item becomes bold but does not turn blue.

Screenshot_20221227_093348.png.cbc471724cbadc60d12ada43c3b87c8a.pngScreenshot_20221227_093323.png.f8c01173ad2f886e7589a723486747df.png

Link to comment
  • Solution
On 12/28/2022 at 12:55 AM, MelPal said:
.header-nav-folder-item a:hover 
{
    font-weight: bold;
    color: #00A3D8 !important;
  
}

I added "!important" to the color in the hover code, and that made it so the color changes now. But I'm still dealing with the underlining of the active folder. image.png.7552d924cf7f81394a97ab4b3ae42bfc.png

Add this to remove underline

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

 

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
  • 2 months later...

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.