Working on a client's site and they are using the Ubermenu 3 plugin for their nav bar. On mobile screens, the navbar collapses and becomes a single bar across the screen and the hamburger icon. Now the client wants to add the company logo and a magnifying glass to the nav when it collapses to mobile.

I have searched and searched but cannot seem to find anything specifically for customizing the mobile nav of Ubermenu.

Is this something I can achieve through some CSS or even Javascript or will I need to go into customizing the Plugin itself?

Any help would be greatly appreciated.

What the mobile nav should look like

enter image description here


So I have come to the conclusion that this is NOT possible out of the box and finding support for this plugin is extremely difficult as they no longer monitor their own forum and all tickets/support is limited to those with licenses of their own.

I am 100% sure there is a way to make this work but sometimes as a developer, we need to find not only a better solution, when money and deadlines are looking over your shoulder, it is probably best to find an easier and quicker solution.

For anyone in the future who stumbles on this question, I would follow Daniel Fonda's advice in the comments and stay away from Ubermenu.

I would also like to add that JavaScript will not work on the Ubermenu nav bar. Somehow, the only way to add JS that will work on Ubermenu is to do so in a file called custom.js that Ubermenu reads, and enable it in the Ubermenu General Settings tabs. Doing so without FTP access seems all but impossible.

  • I won't look at this as needing to customize the uber menu. The logo and the search functionality would just happen to reside in the same space as the the menu, but the two are not connected. Maybe just a little CSS that tells these elements to be above the menu on the z-index when being displayed on a mobile screen. – Brent Nov 29 '17 at 15:56
  • Yea I've tried several CSS tricks to force it including: visibility: show, display: block/inline/inline-block, z-index: 0-1000. I think in the docs it states that ubermenu items, when hidden are also hidden from the CSS but the HTML is still visible. – Brandon Benefield Nov 29 '17 at 15:59
  • So I'm a little confused. Are the company logo and search features already a part of the menu? Or are they independent of the menu structure? Are you wanting to add them, or do they already exists and they are just not being displayed on the mobile version of the site? – Brent Nov 29 '17 at 16:28
  • At the moment the company logo is not available, this is mainly for the search bar. Search bar exists on full menu, but this Ubermenu has something set to hide everything for mobile devices. I've tried creating a sidebar with a search widget. My plan was to do some crafty CSS to move it around but the sidebar wouldn't show up. Unless there is some crafty way to force it to show up I am not sure what to do other than diving into the plugin's code. This is a WordPress.com hosted site on the Business Plan if this makes a difference. – Brandon Benefield Nov 29 '17 at 16:34
  • I see. I'm not familiar with what permissions or flexibility is available through wordpress.com. Do you mind sharing the URL in question? It's never advisable to hack someone else's plugin, and it would kind of invalidate future updates for the plugin as well. – Brent Nov 29 '17 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.