Hide Tags and Badges from Hamburger only for guests

Product Support

AI-generated summary

The discussion is about hiding tags and badges from the hamburger menu for guests in Discourse. Himanshu_Singh wants to simplify the logged-out user interface and needs help implementing this.

JammmyDodger suggests using CSS to target the .anon class, which is applied to anonymous users, and provides an initial code snippet to hide certain menu items.

Himanshu_Singh confirms that the code works but still needs to hide the tags link, which does not have its own class. JammyDodger points to a related topic with a solution.

Himanshu_Singh finds the solution and shares the final working code, which hides the tags and badges links, as well as the separator bar, for guests. The final code is:

/*hide tags  and badges link from hamburger menu for guests */
.anon {
.hamburger-panel .menu-panel {
  a.latest-topics-link,
  a.top-topics-link,
  a.badge-link,
  li a.widget-link[href="/tags"],
  .menu-container-general-links
    { 
    display: none
   }
  }
}
1

I want the logged out user interface as simple as possible so I was wondering if I could hide tags and badges from the hamburger Menu only for guests.

I know this can be done easily with CSS from this post -

But how do I check for the condition that user is a guest and then hide menu items? I probably need to call a function to check this ( just like WordPress) but I have no idea how that would work in Discourse. Can someone please help?

2

Anonymous users have an anon class you can target, so you could use something like:

.anon {
.hamburger-panel .menu-panel {
  a.latest-topics-link,
  a.top-topics-link,
  a.badge-link,
  li a.categories-link { 
    display: none
   }
  }
}

(I just added the anon class to the example from the other topic. You would need to tweak it to hide the specific things you wanted)

3

This worked like a charm. Thank you! Only thing left to hide is the tags link but it does not seem to have it’s own class. How do I target it? With widget-link class it hides the About, FAQ and Mobile View links.

442×140 9.21 KB

4

This one seems promising:

5

[quote=“Removing “Tags” From Hamburger Menu with CSS, post:2, topic:160196”]
.menu-panel li a.widget-link[href=“/tags”] { display: none; }
[/quote]

Perfect. This is the final code that worked. I also hide the separator bar. Thank Jammy!

/*hide tags and badges link from hamburger menu for guests */
.anon {
.hamburger-panel .menu-panel {
  a.latest-topics-link,
  a.top-topics-link,
  a.badge-link,
  li a.widget-link[href="/tags"],
  .menu-container-general-links
    { 
    display: none
   }
  }
}