Active menu in 3.20 how?


#1

Hi have have put active in the project settings and selected a different color for the active state of navbar-nav li a but i cannot see the different color after exporting.

am i doing something wrong?

Thanks
28%20PM 14%20PM


#2

The :active class state is not related to this at all, as mentioned in the docs.

For a custom active state class for use on the nav links, you should enter custom-active in the field (proj settings) then add a class called custom-active via class manager and style that.


#3

@Norm this change really has made a difference but there is something that does not seem to work quite right with it. It would be really helpful to understand where in the class hierarchy this custom class that we provide falls.

The reason I’m asking this is because there are situations where if you change the color of the text in certain places the active styling will not be seen. The only way I can get this to work is if I NEVER style the color of the menu item. If I provide a color in the project settings, for instance, you will never see the custom active color, instead you will get the color from the project settings. Likewise, if I set the color in the inspector the same thing happens.

This is a little confusing and possibly stems from not having a clear understanding of the class hierarchy with this styling. In another life I was a C++ programmer for almost 20 years so I have a little bit of an understanding on how class hierarchies and object oriented programming work, but this does not seem to follow the same principles, The reason I say this is because the custom active class that I provide does not seem to take precedence over the base classes.

What am I missing, I hope you don’t mind taking a little time to explain where in the class hierarchy this custom class takes effect. I really would like to be able to set a custom color for the nav link when it is NOT the active page, I have been unable to make that work.


#4

Are you trying to do it like this? poulson.info


#5

Hi Norm,

Now i did as you said but still does not show the active page/menu

What am I missing please?


#6

Yes exactly!


#7

Do you have a live link to this site?


#8

Well - I’m no expert but I think this is all I did :sunglasses:

Typed active-page into settings…

Set the colour etc on the active-page class…

Don’t apply the active-page class to anything!

Set the menu bar as follows
31

Set the hamburger breakpoint
06

Made a class or two for the colour of the text in the menu (I wanted two colours)

Good luck!


#9

The missing piece of information from my testing of this new feature is, what color (if any) did you set in the project settings for the NORMAL state of the nav links. My testing shows that if you set ANY color for this state you will not see the active page color in the Navbars as it appears to be overridden by the project color.

I believe this is the opposite of what it should be, the project color should ONLY be displayed if a sub-class does not set it to something different. Which in the case of the active page would be on any page but the active page.

Don’t get me wrong the active page styling works perfectly, but it just does work if a NORMAL color has been set in the project settings or the inspector for a link.


#10

Yes and no! I have all of the styling that you are using, but because you are on a white background I cannot tell if you have a color set for the NORMAL state of the nav links in the project settings. My experience is if you set a color here you will not see the active page color. The same is true if you set the color for a nav link in the inspector.


#11

As per my bottom screenshot, I had some links set to the grey colour (because they are of lesser importance) - this class was added to the three menu items.

The others had a similar class added, but set to black.

Hope that helps!

P.S. I’ve now changed the red active-page class to blue. Nicer! here