Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Sub Nav Active Color


darbyobrien
Go to solution Solved by GreggP,

Question

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

 

 

2011102681_HowitShouldLook.png.09aa8c1185512412397b113c4b88b31d.png1866935658_CurrentSubNav.png.7bf58b75f6460849d9aa232c0f5a204c.png884228568_ActiveMainNav.png.c8249c8e96436d5f6dd620875fb48331.png

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

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

Edited by GreggP
Link to post
  • 0

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 post
  • 0

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 post
  • 0

in fct thinking about it, you probably only need the second block of code to change your sub-menu colours as the active page defaults to your green anyway, so just the second block should do it...

Link to post
  • 0
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,

 

thanks!

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.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...