Best Answer

CSS Hide Menu Item

  • 4 August 2021
  • 8 replies
  • 473 views
dklinger
Rank
Userlevel 7
Badge +6

Morning,

Has anyone pulled off hiding menu items effectively via CSS?

The use case is that I want my users to be able to walk a navigation experience inside of the system (I know that is such an old fashioned idea, but when it is done well? It can do wonders for granularity).

And so I know that by adding pages into menus drive the visibilty of pages for users.

BUT I dont want all of those pages showing up in the left hand menu. If I pull them? I land up getting 403 permission errors and my navigation experience breaks.

I dont mind if Powerusers have the ability to see them.

And Superadmins? Well they are very few of them - I dont mind them seeing that noise either but (tend to) have access to everything.

I hope this makes sense.

icon

Best answer by nick.tosto 4 August 2021, 17:16

View original

8 replies

N
Rank
Userlevel 6
Badge +1

You actually don’t have to use CSS to achieve this. All you need to do is assign more than one menu to your users. The higher up assigned menu in the hierarchy will control which pages appear in the lefthand menu, while the lower assigned menu in the hierarchy gives the user permission to see the pages assigned to it. 

So I would create a new “Secondary Pages” menu visible to all branches and make it the last menu in your hierarchy. With that, users should no longer see 403 errors on the secondary pages!

M
Rank
Userlevel 5
Badge +1

I second @nick.tosto on this. I just heard this was possible recently and it’s very helpful. 

@dklinger I attempted to hide menu items via CSS a couple of years ago when we first implemented Docebo. I also took it a step further by indenting menu items to make them appear as ‘subpages’ of parent menu items. It is possible to do via CSS but is ill-advised. If I recall correctly, the biggest issue was the dynamic nature of menus. You’d have to target the specific numbered menu element (e.g., #6). But then that number might change based on the user’s role (e.g., Power User, or a Manager where an additional My Team menu item appears, etc.).

It’s just not worth the hassle IMO. 

dklinger
Rank
Userlevel 7
Badge +6

Thank you both for the response. @nick.tosto - thank you for the insight. I tried it out and it worked perfectly. I swear I got this wrong actually twice in Docebo University.

Its in the course….

As I like to tell people - I am a slower learner - but a learner indeed.

-Dan

dklinger
Rank
Userlevel 7
Badge +6

I am instituting a best practice to help - dont know if it makes sense - but I figure show it off - so I dont lose the fact that visibility is really being driven by whats up top and the permission to avoid that 403 error is down below.

As I get a little more into it - branch logic - etc - I will be sure to post a better response.

I may have inverted the names but I think I got it….

 

willingworth
Rank
Userlevel 4
Badge +1

Would OP or any others mind putting together a show-and-tell on how this actually works? Our internal nav is really goofed at the moment. I’ve inherited a system that needs some fixing, but it’s hard to conceptualize while the plane is in flight (if you catch my metaphorical drift).

Annarose.Peterson
Rank
Userlevel 7
Badge +5

@willingworth this isn’t a show and tell necessarily, but there are some good step by step instructions on this thread. :-)

 

Annarose Peterson (She/Her)
willingworth
Rank
Userlevel 4
Badge +1

Bless you, and those in that thread, @Annarose.Peterson 

T
Rank
Userlevel 3
Badge

We have been using this for our various iterations of our user experience and found it works like a charm. We have 3 multi-domains with multiple experiences in each one.  I love the idea of labeling those that are not visible and will incorporate that ASAP. We had used a pretty vague indicator in the code, but labels would be crystal clear.

Reply


Terms & ConditionsCookie settings