Hamburger menu on mobile devices

[openvoiceschoir]

I redesigned my website using Weaver Xtreme (it has not gone public yet) and am fumbling my way through the theme’s features.  I am happy with my progress but one thing I want (but can’t figure out) is how to get a hamburger menu when my site is opened on a mobile device.  At the moment, the menu is a list of web pages starting with ‘navigate’.  I have looked through the Guides but I can’t figure it out.  Is there an plug-in I need to use?  Is there some custom css code I code use?  Can you help me or point me in the right direction?

My site is http://www.openvoices.ca/staging

[User]

@openvoiceschoir

Please have a look here:

Hamburger position with Smart Menu

Regards.

[openvoiceschoir]

Thank you are offering some suggestions.  I looked at ‘Hamburger position with Smart Menu’ and added the following custom CSS code to my website (not sure if this is the correct code to use).  It does not give me a hamburger menu on my mobile device.

.is-menu-mobile .wvrx-menu-button {float:right}
.is-menu-mobile ul.wvrx-menu.sm {text-align:right;float:right}
.is-mobile .wvrx-menu ul {text-align:right}
/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li > a.has-submenu {padding-right:2em;}
.is-mobile .menu-primary .wvrx-menu.sm a span.sub-arrow::after {margin-right:1.5em;}

[scrambler]

First the only menu I see is one fixed at the top with “about us” “2025/2026 season” “contact us” “member login”

If you are speaking of another one, please elaborate.

The menu I mentioned above disappears as soon as the browser gets under 1200px wide, then when the browser gets under 960px an unstyled drop downlist shows up instead, so I am not sure what is going on but this would be why you dont see the hamburger menu on mobile.

It looks like the whole thing is broken.

First, remove your custom CSS as this is not the issue right now.

Second, make sure you do not have any Plugin that Optimizes CSS and JS, as these can break the Theme CSS and JS. If you have one deactivate it for now and see if that fixes the issue.

Next, check if any plugin could be interfering with the theme by temporarily deactivating ALL non weaver plugin. If the issue goes away, reactivate one by one to find the culprit

[openvoiceschoir]

Thank you Scrambler!  I implemented both of your recommendations — removing CSS and temporarily deactivating all plugins.   Doing this solved the problem I was trying to fix and it resulted in the hamburger menu appearing on my mobile device!   I cautiously reactivated some of the plugins.

If you don’t mind me asking a follow up question — how do you identify non-weaver plugins from weaver plugins?

[User]

Please see here for a list of Weaver plugins:  https://forum.weavertheme.com/forum-upgraded/

Regards.

[scrambler]

In the dashboard plugin page, each plugin has a View detail link that will show the author.

If it says wpweaver it is a weaver plugin

[Author]

Posts