Wrench no longer working due to old theme

AI-generated summary

The discussion centers around a broken wrench icon and malfunctioning navbar dropdowns on the RateBeer community forum, traced to an outdated custom theme. Joseph_Tucker1 reported the issue starting mid-May, noting that despite no recent code changes, problems emerged after theme updates. Moin and Jagster suggested the issue likely stems from the theme or plugins, recommending safe mode testing. Joseph_Tucker1 confirmed the theme’s age and asked for guidance on debugging and building a compatible navbar. merefield advised checking browser console errors. bryce identified the root cause: conflicting CSS targeting .dropdown-menu from an old Bootstrap/jQuery-based theme interfering with Discourse’s updated form kit. He recommended adding a specific override in common.scss to restore admin menu functionality without breaking other dropdowns. Joseph_Tucker1 expressed gratitude for the solution.

About mid-May, the wrench stopped working for our admins. I’d really like to get this working again.

**


**

We also have a navbar that uses jquery for dropdown options and now those aren’t working anymore after updating our custom theme. Any help would be much appreciated!

https://community.ratebeer.com/ .

Is this also because of your custom theme or a general problem?

From my experience it is every time some plugin, component or theme. What safe mode says?

Yes it’s probably our theme. It’s quite old. However no one had touched any code locally in five years and yet there have been a number of problems arising.

I’m not interested in placing blame though. I am interested in solving the problem.

How does one test for problems?

Are there acceptable methods to create a working navbar for a custom theme? (Ours is an ancient version of bootstrap/jquery)

The first thing you should share is any errors and/or deprecation warnings in your browser console.

Hi Joseph,

I took a look at the forum and I think I see what the issue may be.

(1) It looks like there’s some CSS in the theme to style .dropdown-menu that is causing an issue. We recently did a big update to our “form kit”, so maybe the .dropdown-class was added to the admin menu as part of the process, and now is being inadvertently targeted by the old CSS.

There are two copies of the same styling in the theme that both include display: none.
If I disable those in browser dev tools, the menu shows up (2).

However, it looks like this CSS is important for hiding a different dropdown menu (3), since it appeared after I disabled the display: none’s.

What I would recommend would be to add something like this to your common.scss:

.fk-d-menu__inner-content .dropdown-menu {
   display: block;
}

This should target just that admin menu while leaving the other dropdown menus alone.

Thank you so much, Bryce!