⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Squarespace is designed so that this line will show underneath the page you are currently on; this code removes it. I you want the line to show on all active pages, you don't need to add any extra code! :)
Great! Thank you so much for this! This worked great for my navigation with a single link and got rid of all the underlines. But I use a navigation with drop down folders, and all of the folder links turn bold. Is there any way to have bold on hover for drop down links without having all of the links turn bold black? Any feedback is greatly appreciated! Thank you
The bold is super strange - that's not a part of this code! I would take a look at any font-weight css you have to make sure it's not overwriting the normal font weight. Feel free to send me a link to the site if you want me to take a look (support-at-insidethesquare.co)
After removing the underline I planned to give users the ability to know what page they are on by having the text a different color; how do you do this?
Hi Becca, just found your video on this but I'm having some issues with removing the active link underline for navigation folder items. I coded remove background image but it didn't work, would appreciate if you knew a way to work around it. Thanks! Code I used: .header-nav-folder-item-active a{ background-image:none!important;} .header-nav-folder-item a{ color:#FFFFFF!important; background-image:none!important;}
Any tips on removing the underline from the navigation buttons on the mobile overlay menu? RIght now I have .header-menu-nav-item--active > a, body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content { font-weight:bold !important; color: #774d65!important; background-image: none !important; } but with no luck.
Great quetsion! The mobile menu links, including folders, have a totally different selector. I didn't even think to include this in the video - definitely adding it to my "redo" list!! in the meantime, here is the selector for the mobile menu active link: .header--menu-open :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content Hope that helps and best of luck with your project!
Hi there, It seems like it's not working on pages within a dropdown folder. They still have the underline. Could you help me with this? Thank you so much!
Great question April - I totally overlooked that one! Here is the code to remove it from the dropdown: .header-menu-nav-item-content { background-image:none!important; }
@@InsideTheSquare Hmm it looks like it isn't working. I wonder if I've entered the code incorrectly? .header-nav-item--active a { background-image: none!important; } .header-menu-nav-item-content { background-image:none!important; } Thank you again for your time and help!
@insidethesquare @aprilnalani Hey there, have you found a solution to that? Tried both of your options and my drop-down menu still have the underline marked.
@@gusheringer found this in a forum and it worked for me: .header-nav-folder-item--active .header-nav-folder-item-content { background: none !important; }
@@InsideTheSquare thanks so much for all the helpful code across all of your videos. One thing that I find interesting within subpages in dropdowns is that if you use links ("link to pages or external sites") as opposed to pages, formatting does not apply to these items within the dropdown list. This happens even without any custom code in that the default/out-of-the-box underlining applies to the page elements within the dropdown list but not the link elements in the dropdown list. Do you have a workaround for applying formatting to link items in a dropdown to make them model the formatting for page items in the same dropdown list? I wish I could attach a screenshot, but hopefully that gives you enough context :)
Hi. I tried using the CSS code you have in your tutorial to remove the lines in the header section but it does not respond. Am I missing something. I open the CSS Panel, paste the code, but there's no response. The lines remain.
If your site didn't respond the way mine did in the video, you might be using a different version of Squarespace. Visit insidethesquare.co/themes for more info
@@InsideTheSquare Yeah... I'm using 7.1. At least that's what it says at the bottom of Pages > WebSite Tools. I open the Tools, Select Custom CSS and put in the code, and nothing happens, even after I hit Save. I'm pretty bummed out...
@@SheilaMcGee-oi5tn if it's not working the way it does in the video something is up! Are your links page links, or are the dropdown folders? Feel free to send me a link to your site and I'll take a look: support-at-insidethesquare.co
Sure! You can use the text decoration property with the line-through value, like this: :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content{ background-image: none!important text-decoration: line-through }
![ROSÉ(로제) - APT. (Band VER.) (With. 이영지) [더 시즌즈-이영지의 레인보우] | KBS 241129 방송](http://i.ytimg.com/vi/IW8qaemx74g/mqdefault.jpg)
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Thanks so much ...4 hours later this worked like magic.
Glad it helped... eventually! :)
Life saver exactly what I was looking for!!
Awesome! Happy I could help 🙌
I acutely want the line to show on all active pages, not just the home page. How would I do that?
Squarespace is designed so that this line will show underneath the page you are currently on; this code removes it. I you want the line to show on all active pages, you don't need to add any extra code! :)
Great! Thank you so much for this! This worked great for my navigation with a single link and got rid of all the underlines. But I use a navigation with drop down folders, and all of the folder links turn bold. Is there any way to have bold on hover for drop down links without having all of the links turn bold black? Any feedback is greatly appreciated! Thank you
The bold is super strange - that's not a part of this code! I would take a look at any font-weight css you have to make sure it's not overwriting the normal font weight. Feel free to send me a link to the site if you want me to take a look (support-at-insidethesquare.co)
Such a perfect tutorial. Thank you so much.
You're so welcome - happy I could help! 🥰
After removing the underline I planned to give users the ability to know what page they are on by having the text a different color; how do you do this?
Great question! I cover that in the video after the 01:33 minute mark.
Hi Becca, just found your video on this but I'm having some issues with removing the active link underline for navigation folder items. I coded remove background image but it didn't work, would appreciate if you knew a way to work around it. Thanks!
Code I used:
.header-nav-folder-item-active a{
background-image:none!important;}
.header-nav-folder-item a{
color:#FFFFFF!important;
background-image:none!important;}
Intersting! Try adding this:
.header-nav-item--active a, .header-nav-folder-item--active *{
background-image:none!important;
}
Any tips on removing the underline from the navigation buttons on the mobile overlay menu? RIght now I have
.header-menu-nav-item--active > a,
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
font-weight:bold !important;
color: #774d65!important;
background-image: none !important;
}
but with no luck.
Great quetsion! The mobile menu links, including folders, have a totally different selector. I didn't even think to include this in the video - definitely adding it to my "redo" list!! in the meantime, here is the selector for the mobile menu active link:
.header--menu-open :is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content
Hope that helps and best of luck with your project!
Hi there, It seems like it's not working on pages within a dropdown folder. They still have the underline. Could you help me with this? Thank you so much!
Great question April - I totally overlooked that one! Here is the code to remove it from the dropdown:
.header-menu-nav-item-content {
background-image:none!important;
}
@@InsideTheSquare Thank you!! Really appreciate it
@@InsideTheSquare Hmm it looks like it isn't working. I wonder if I've entered the code incorrectly?
.header-nav-item--active a {
background-image: none!important;
}
.header-menu-nav-item-content {
background-image:none!important;
}
Thank you again for your time and help!
@insidethesquare @aprilnalani Hey there, have you found a solution to that? Tried both of your options and my drop-down menu still have the underline marked.
@@gusheringer found this in a forum and it worked for me:
.header-nav-folder-item--active .header-nav-folder-item-content {
background: none !important;
}
Does anyone know how to apply the same strategy to the subpages in a dropdown tab on the navbar?
Oooh ooh! I do! 😉 Give this code a try:
.header-nav-folder-item--active *{background:transparent!important}
@@InsideTheSquare thanks so much for all the helpful code across all of your videos. One thing that I find interesting within subpages in dropdowns is that if you use links ("link to pages or external sites") as opposed to pages, formatting does not apply to these items within the dropdown list. This happens even without any custom code in that the default/out-of-the-box underlining applies to the page elements within the dropdown list but not the link elements in the dropdown list. Do you have a workaround for applying formatting to link items in a dropdown to make them model the formatting for page items in the same dropdown list? I wish I could attach a screenshot, but hopefully that gives you enough context :)
Hi. I tried using the CSS code you have in your tutorial to remove the lines in the header section but it does not respond. Am I missing something. I open the CSS Panel, paste the code, but there's no response. The lines remain.
If your site didn't respond the way mine did in the video, you might be using a different version of Squarespace. Visit insidethesquare.co/themes for more info
@@InsideTheSquare Yeah... I'm using 7.1. At least that's what it says at the bottom of Pages > WebSite Tools. I open the Tools, Select Custom CSS and put in the code, and nothing happens, even after I hit Save. I'm pretty bummed out...
@@SheilaMcGee-oi5tn if it's not working the way it does in the video something is up! Are your links page links, or are the dropdown folders? Feel free to send me a link to your site and I'll take a look: support-at-insidethesquare.co
Any code on how to add a strikethrough on an active link?
Sure! You can use the text decoration property with the line-through value, like this:
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content{
background-image: none!important
text-decoration: line-through
}
@@InsideTheSquare Awesome!! Thank you!!!
Is there a way to put a custom color in there? Thanks!
Great question - and yes! Did you want to change the color of the link font, the line, or both?
@@InsideTheSquare The link font and only when you over. Thanks!
Hi! How can it have effect on the other text links? (I need to change the color, but it works only on the first)
No ok, I just find it! Just removing the word "--active". Thank you anyway!
Yay! Glad you were able to troubleshoot yourself!
⭐ Learn Squarespace CSS basics in my FREE class: insidethesquare.co/learn