Skip to main content

Hi everyone!

We've been given guidance by our Marketing and Design team on some pointers on the top Nav. One of the things which they want to see is - the Nav header remaining highlighted based on the page we are on aka an Active nav link indicator for every page. For example - If I am to navigate to the 'Home' page the Top Nav should highlight the 'Home' button on the Nav. 

Proposed look

Upon further research I have seen that an Active nav link indicator can only be added via JavaScript which Docebo Learn does not support at the moment.

Is there any roundabout way to do this with only the help of CSS? 

Would really appreciate insights on this problem, thanks!

Yeah, no, this type of action really relies on scripting, CSS doesn’t know which page it is on to be able to add/remove/update tags to be able to do this type of thing.  As a reminder too, making such a huge nav based change can be an issue of experience if you plan to use the app. With both in mind, if really going all in, probably seeing if you can almost build the menu externally and frame it in, would give you more flexibility and control if really need. 

Reply


Terms & ConditionsCookie settings