Hiding items in hamburger menu

I would like to remove some items in the hamburger menu, like Tags.

I saw a similar article that says it’s possible with a css: How can I disable "About" menu in hamburger menu?

But I am not sure where to put this css in a plugin.

Hello,

You need to create a new component for this.

  1. Go to /admin/customize/themes/
    Customize → Themes

  2. Click the Components tab and then the Install button

  3. On the popup window click Create new button and type the new component name.

  4. Click Create button.

  5. The component created. Now select which theme(s) you want to activate it.
    Screenshot 2022-07-26 at 12.06.13

  6. Now click the Edit CSS/HTML button.
    Screenshot 2022-07-26 at 12.07.53

  7. Now click the COMMON tab and paste the below code to the CSS section.

Here you can target the title attribute too but probably better if you target href because that is fix and title changes on different languages so that is not ideal.

.menu-panel li a.widget-link {
  &[href="/tags"] {
    display: none;
  }
}

On this example we hide the Tags but you can add more item by following the code below.

It will hide Tags and Badges.

.menu-panel li a.widget-link {
  &[href="/tags"],
  &[href="/badges"] {
    display: none;
  }
}

Click Save. Done! :slightly_smiling_face:

2 Likes

I learned a lot from this answer. Thank you very much!

1 Like