Jump to content

Sub Nav Active Color

Recommended Posts

Site URL: https://contrabass-grasshopper-jkw3.squarespace.com/

Trying to figure out to no avail how to get this sub-nav to only show the active page your on in the green instead of anything under the folder, not super familiar with coding but have hacked together the majority of the site with limited knowledge. 


attached some screen grabs for reference.


The how it should look image is what im shooting for but that is only on the hover where as it is easy to tell what page you are on in the main nav, it is indistinguishable on the submenu pages




Link to comment
  • Replies 6
  • Views 1k
  • Created
  • Last Reply

So you are happy with the primary nav colour being green, but you wan tthe sub-nav colours different?

The page you are on in green but the other pages in white yes?

Am I understanding you correctly?

What is your file structure to create the menus? are they folders? (I ask as normally a folder will be clickable and yours aren't, only the sub-navs are clickable...)


Link to comment

that sounds about right to me yes.


 i just want only the active page in the sub menu to register with the color of green as shown in one of the above pictures, but it is currently listing both subpages as the green links making it hard to tell what page youre really on


as far as the structure goes, they are regular pages in a folder option, does that help at all? 

Screen Shot 2020-12-15 at 12.03.02 PM.png

Link to comment

pasting the following code 

In the Design Menu>Custom CSS :

.tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder-item--active {
    color: #76BC21;

Should give you the option to alter the colour of the page that is active (the one you are on) as such you can change the colour to a different green or a white - although this may look odd as it will be the inverse of the main headings. Personally I'd specify the green that you have already, and then change the other menu items so they aren't green but rather white...if so you will need to also paste teh following code inot teh same place:

.tweak-header-primary-nav-hover-style-active .Header-nav .Header-nav-folder-item {
 color: #F7F7F7


Hope this helps 🙂

edited to put your hex codes into it so just copy and paste it and it should work now...

Link to comment
On 12/16/2020 at 12:34 AM, darbyobrien said:

coding didnt work for me the way it was intended but it did allow me to stumble on to the solution by seeing how it was broken down,



1. I see some pages have very long content. You can consider adding a back to top button.

2. (Mobile) The icons on mobile look huge (I mean this section: Paragus makes i.t.fun)

You can add this to Design > Custom CSS to fix this.

/* resize mobile icons */
@media screen and (max-width:640px) {
div#page-section-5f870b419bc33c0183223b7c .image-block {
    width: 50% !important;
    height: auto !important;
    margin: 0 auto;

3. (Mobile) Logos is 1 item/row. If you want to convert to 2 items/row, you can use this CSS

/* logos 2 items row */
@media screen and (max-width:767px) {
div#page-section-5f87422a6d42b800f211ad9f .span-12>.row>.span-3 {
    width: 50% !important;
    float: left !important;


4. (Tablet) Paragus makes i.t.fun icons looks ugly..

5. (Tablet) Are our..buttons not align.

I think if you check your site on tablet, you will see some other problems.

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


This topic is now archived and is closed to further replies.

  • 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.