Menu name of open page a different colour


#1

I saw this was a feature added by @norm but I cannot find the post anywhere. Could someone direct me please. As the subject says I want to make the visited page name in the menu a different colour to the rest. thanks


#2

https://help.blocsapp.com/knowledge-base/active-state-navigation-class/

When in Blocs, go to the menu at the top of the screen, and under HELP you can directly link to the USER DOCUMENTATION and search for what you need…its a pretty good place to start…


#3

Thanks
Instructions seem clear but I cant get it to work. It sounds like the Active class is already included but I don’t see it in the class manager. After adding the class it isn’t clear if this is automatic or needs to be applied to the menu. Regardless nothing showing up for me.


#4

yeah…this can be a bit confusing and not very intuitive.

Blocs was created with the notion that the app will do a lot of work for you, and so it comes with a bunch of bootstrap classes that are essentially invisible, and so they don’t show in the Class Manager, though you can discover them by using the PREVIEW DEVELOPER INSPECTOR feature to find the code & class names, and then add them manually in the Class Manger, and then makes changes to those classes in the Class Editor, though this may get a bit complicated.

https://help.blocsapp.com/knowledge-base/preview-mode/#developer-tools

And so, Blocs comes with an ‘active’ class provided by bootstrap, which provides two options: LIGHT or DARK, which you select in the right side inspector panel by first selecting the Nav Bar element in the Layer Tree.

Then when you preview the page, the active page link is slightly shifted in color depending on which option (Light or Dark) you’ve selected, and as well there is a hover state when you roll over any nav link.

Because the color shift is subtle, using a contrasting color for the background of the Nav area helps make this color shift more visible.

Personally I find creating a navigation with no pre-loaded classes much more useful, by selecting the LIST in the Layer Tree, and then choosing NONE in the right side panel, and then create Custom Classes to style the Nav List & Link as I need.


#5

Thanks for the help - still not getting any changes so I dunno. I’m using navbar .nav a to format the menu so I added that to the project setting but still no change to the active page.


#6

you are saying that you’ve created a custom class called .nav a, and entered it in the Project Settings panel? If so, did you select NONE in the method I described above?? Or, is the ‘PRIMARY MENU’ option selected in the right side inspector?


#7

Source is Primary menu


#8

try setting the source to none, and then see if your custom class works…

btw, I think this raises another problem…as ACTIVE in the Class Editor means something different then ‘active’ in the Project Setting…adding to the confusion…

If you don’t use the Primary Menu, then I actually don’t know how to set the current page link to a different color…but if you locate the bootstrap nav classes, using the Developer Inspector, you should be able to add them in the Class Manager, and then adjust them in them in Class Editor.


#9

Thanks for your help but nothing seems to work. probably something stupid on my part. Maybe @norm might have an idea.


#10

Did my best…I can say that when I follow the instructions in the User Documentation, with out making any changes, nor adding any Custom Classes, using a Nav Bar in the Global Area, I do get the color shift for the current page.

Wonder if it matters if the nav bar is in the global area or not?


#11

Good point as mine isn’t.


#12

ah, give that a try…let me know if that does the trick…