Sub Nav Active Color

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

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

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? 

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

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!

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.