Submenus do not expand on iPhone

I’m not sure your theme uses wp_nav_menu() to generate the basic menu HTML, but if it does you can then use the ‘wp_nav_menu_items’ filter to modify each menu item’s HTML. I don’t know if this would solve the iPhone issue, but it is how to add other HTML tag attributes like tabindex.

If your theme does not utilize wp_nav_menu() or adding tabindex attributes does not resolve the iPhone issue, I recommend asking for help through your theme’s dedicated support channel.

I don’t see any CSS attempting to make the menu orange. There is a console error regarding certain CSS but it appears to be related to the events calendar plugin and probably doesn’t affect menu CSS. To alter the menu’s color, first be sure there is not a theme setting somewhere that allows you to choose a menu color. If no such setting can be found, you could add the following to the customizer’s Additional CSS panel:

.main-small-navigation ul.mobile-menu {
    background: orange;
}

Thankyou bcworkz for trying to help. The theme organization the township is using is retired, so cannot ask for help there. I am weighing my options prior to switching to a new theme. The last time I switched the whole site went down, but am more prepared as have ftp access to backup, and maybe I pushed Divi too fast. I would like to try to get this them to work as si so close to what is simply needed, but open to advice.

I am not an expert coder, but can follow detailed instructions. I am not sure if my theme uses?wp_nav_menu(), is not in style.css. Here is s screenshot of root folder with similar names.

• This reply was modified 11 months ago by mgondek.

Here is a snippet from style.css. Maueb teh 2nd display:none; might need to change????? HELP!!!!

.menu-toggle {
display: none;

cursor: pointer;
}

.main-small-navigation ul.mobile-menu {
display: none;
background: #50B848;

}

/*** ESSENTIAL STYLES ***/
.menu, .menu * {
margin: 0;
padding: 0;
list-style: sans-serif;
}
.menu {
line-height: 1.0;
}
.menu ul {
margin: 0px;
padding: 0px;
}
.menu ul ul, ul.menu ul {
position: absolute;
top: -9999px;
width: 180px; /* left offset of submenus need to match (see below) / } .menu ul li ul li, ul.menu ul li { width: 100%; margin: 0px; } .menu li:hover { visibility: inherit; / fixes IE7 ‘sticky bug’ / } .menu li { float: left; display: inline-block; position: relative; } .menu li li { display: block; position: relative; } .menu a { display: inline-block; position: relative; } .menu li:hover ul, .menu li.sfHover ul { left: 0; top: 50px; / match top ul list item height / z-index: 99; } ul.menu li:hover li ul, ul.menu li.sfHover li ul { top: -9999px; } ul.menu li li:hover ul, ul.menu li li.sfHover ul { left: 180px; / match ul width / top: 0; } ul.menu li li:hover li ul, ul.menu li li.sfHover li ul { top: -9999px; } ul.menu li li li:hover ul, ul.menu li li li.sfHover ul { left: 180px; / match ul width */
top: 0;
}

This post sugegst min-height?to?0px is needed. Might that help?

min-height: 0; might help if the issue were the submenu failing to be hidden when it should be. I don’t see how it would rectify a failure to expand problem.

I suspect the problem lies within the script used to manage mobile menu behavior. When I try to expand a submenu a number of script errors get logged in the console. While the errors do not affect behavior in some browsers, it’s quite possible that certain browsers like Safari are affected. The errors are attributed to superfish.js which is a jQuery menu plugin (not the same as a WP plugin).

Superfish is bundled as part of your theme. While there is a more recent version of Superfish available, it’s unclear how it may have been modified to integrate it with your theme. The chances of you successfully updating just the Superfish component are rather small. There’s no guarantee a successful update would even resolve your problem.

The way mobile submenu display is managed is kind of odd to start with. It’s initially hidden with an element style attribute which normally cannot be overridden. The submenu display apparently can override the style attribute with display: block !important;. I was not aware that is even possible! Even so it strikes me as an inherently weak approach.

I’m inclined to recommend switching to a more up to date theme that is actively supported. Your reluctance is understandable due to your previous experience. More recent versions of WP should refuse to activate a theme if doing so would crash the site. Even if a crash should occur, since you have FTP access it’s fairly simple to rename the problem theme’s folder so WP will need to use a more suitable theme. You then can regain access to WP admin where you can try activating another theme that won’t crash your site.

You can improve your chances of success if you first deactivated all of your plugins before activating a new theme. Once your preferred theme is active you can then re-activate your plugins. Once again, if activating a plugin should cause a site crash, WP should refuse to activate it. And if a crash should happen anyway, using FTP to rename the problem plugin’s folder will let you regain access to WP admin.