mgondek

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

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;
}

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, 1 week ago by mgondek.

I found this link which speaks about “add explicit?tabindex=”0″?to every link in the menu hierarchy (including the pseudo links that act as buttons). This seems to make the element focussable in the iOS touch interface.”. Can someone help me apply that in WordPress to me menu?

I got rid of alot of extra code not needed like jetpack & Custom Menu widget. Here is what is left of code in section called navigation. Maybe someone will see something suspicious in here. I also made the child menus orange which should help once this works on iPhone

#navigation {
float: left;
background: #228B22;
color: #666666;
position: absolute;
width: 100%;
height: auto;
top: 0px;
font-size: 0.85em;
font-family: ‘Helvetica Neue’, Helvetica, sans-serif;
font-weight: 800;
margin: 0px 0px 0px -8px;
padding: 0px 8px;
z-index: 9999;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)),to(rgba(0, 0, 0, 0.30)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.30));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.30));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.30));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.30));
background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.30));
border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
-khtml-border-radius: 0px 0px 2px 2px;
-webkit-border-radius: 0px 0px 2px 2px;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .4);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .4);
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .4);
}

.menu-toggle {
display: none;

cursor: pointer;
}

.main-small-navigation ul.mobile-menu {
display: none;
background: #228B22;

}

/*** 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;
}

/*** SKIN ***/ navigation .menu .current_page_item a, navigation .menu .current_page_ancestor a, navigation .menu .current-menu-item a, navigation .menu .current-cat a {

background: rgba(0, 0, 0, .12);
color: #FFFFFF;
}

navigation .menu li .current_page_item a, #navigation .menu li .current_page_item a:hover, navigation .menu li .current-menu-item a, #navigation .menu li .current-menu-item a:hover, navigation .menu li .current-cat a, #navigation .menu li .current-cat a:hover {

background: rgba(0, 0, 0, .12);
color: #FFFFFF;
}

navigation .menu .current_page_item ul li a, navigation .menu .current-menu-item ul li a, navigation .menu .current-menu-ancestor ul li a, navigation .menu .current_page_ancestor ul li a, navigation .menu .current-cat ul li a {

background: none;
color: #EEEEEE;
}

navigation .menu li.current-menu-ancestor a, navigation .menu li.current_page_ancestor a, navigation .menu .current_page_item ul li a:hover, navigation .menu .current-menu-item ul li a:hover, navigation .menu .current-menu-ancestor ul li a:hover, navigation .menu .current_page_ancestor ul li a:hover, navigation .menu .current-menu-ancestor ul .current_page_item a, navigation .menu .current_page_ancestor ul .current-menu-item a, navigation .menu .current-cat ul li a:hover {

background: rgba(0, 0, 0, .12);
color: #FFFFFF;
}

.menu {
margin-bottom: 0;
}
.menu ul.sub-menu,
.menu ul.children {
background: #D87100;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-khtml-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, .08);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .08);
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .08);
}
.menu a {
background: 228B22;
min-height: 50px;
line-height: 4.2;
text-decoration: none;
text-shadow: -1px -1px rgba(0,0,0, 0.1);
letter-spacing: 0.4px;
margin: 0px;
padding: 0px 12px;
}
.menu a,
.menu a:link,
.menu a:visited {
color: #EEEEEE;
}
.menu a:focus,
.menu a:hover,
.menu a:active {
background: rgba(0, 0, 0, .12);
outline: 0;
}
.menu a:hover {
color: #FFFFFF;
}
.menu li li a {
display: block;
background: none;
min-height: 0;
font-size: 1em;
line-height: 2.8;
margin: 0px;
padding: 0px 12px;
}
.menu li li a,
.menu li li a:link,
.menu li li a:visited {
color: #EEEEEE;
}
.menu li li a:focus,
.menu li li a:hover,
.menu li li a:active {
background: rgba(0, 0, 0, .12);
outline: 0;
}
.menu li li a:hover {
color: #FFFFFF;
} navigation .menu li.sfHover:hover a {

color: #FFFFFF;
}

navigation .menu li.sfHover:hover {

background: rgba(0, 0, 0, .12);
outline: 0;
}

.menu li {
margin: 0px;
border-right: 1px solid rgba(0, 0, 0, .12);
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.menu li:first-child {
border-left: none;
}
.menu li li {
background: none;
margin: 0px;
border-right: none;
border-left: none;
}
.menu li li a {
border-top: 1px solid rgba(0, 0, 0, .12);
}
.menu li:first-child,
.menu li:first-child a {
}
.menu li li:last-child,
.menu li li:last-child a {
}

/*** ARROWS **/
.sf-arrows .sf-with-ul {
padding-right: 2.2em;
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) / } / styling for both css and generated arrows / .sf-arrows .sf-with-ul:after { content: ”; position: absolute; top: 50%; right: 1em; margin-top: -2px; height: 0; width: 0; / order of following 3 rules important for fallbacks to work / border: 4px solid transparent; border-top-color: #DDDDDD; / edit this to suit design (no rgba in IE8) / border-top-color: rgba(255,255,255,.5); } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: white; / IE8 fallback colour / } / styling for right-facing arrows / .sf-arrows ul .sf-with-ul:after { margin-top: -4px; margin-right: -3px; border-color: transparent; border-left-color: #DDDDDD; / edit this to suit design (no rgba in IE8) */
border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: white;
}

On 3 iPhones it does not expand the menu in Chorme or Safari, and even on a private tab. The phone that it did work on was a google Pixel Phone. Have not tested on Android.

I also tried Muhammad’s code. Is quicker for me to put his code in Additional CSS to replace T-P suggestion, but got a error in the code and would not publish, but does not say which line. Can I try Muhammad’s code in Additional CSS (is much easier than trying to ensure customizer plug in is working)?

My brother confirms is working also, so must be problem on MY iPhone. Happens in both Chrome and Safari on my iPhone Pro Max 15 Ios 17.2.1 (most current). I have javascript on, restarted my phone, and have cleared history/cache on both browsers. The problem is the menus are not expanding on my mobile device. HELP

Anyone else have IPhone 15 can you let me know what you see.

• This reply was modified 11 months, 1 week ago by mgondek.

Thanks for the video, as I tried on both Chrome & Safari on iPhone and does not work for me. Clearing cache can be quite complex (especially on Chrome), but I never booted Chrome on my iPhone. I also cleared history and website date on my iphone.

I click on any of the 7 options and they turn darker green, but do not expand, the menu is stuck collpased on my iPhone. Might this be an iPhone compatibility issue.

I removed the code form muhammad, and I added the code to the customizer >> Addiitonal CSS. The menu on mobile is collapsed, but wil not expand.

There was some talk earlier abotu creating a dupciate of the oringla menu for the mobile, but I did not see anything about how to make that differetn or to enabel for the mobile.

I wanted to anounce tomorrow evening on social media for people to visit the new website. If someone could help make the mobile version of menu work nicley, the township would be very grateful.

The parent menu items should be # with urls NOW. I made the changes accidenatlly to my mobile menu version on accident. Apologies this WordPress is new to me.

Can you please walk me on what to do next. I tried using both of the 2 methods alone, and still no mobile menu that collapses and uncollapses. Right now is set to muhammads method. We should be close now as the mensu are set to #. I also found a great plug in to allow duplication of menus as there was some talk about that, but did not see what I needed to do differently for the mobile version. I know that resetting the cache could be an issue in troubleshooting this, adn i belvie my iPhone is set to reset the cache os am proofing there, and making changes on my computer while trying to implement this.

• This reply was modified 11 months, 2 weeks ago by mgondek.
• This reply was modified 11 months, 2 weeks ago by mgondek.

I want to switch the theme, but I bought Divi and switched and it took the website down. I had to call the tech line and they restored the site to an older version. Other problems opened up like the logo was tiny, so want to continue if I can fix this them for awhile as am learnign and gettng my bearings in wordpress. Next week will I set up a time with the helpdesk they will be available holidays for me to to test other themes. Please recommend a theme if that is an easy way out of this.

I removed the categories and did Custom Links #.

I also added the code snippet per Muhammad. I added the ending style tag, and flipped the switch to apply. Nothing happened.

I am so thankful you are all trying to help me. I implemented the suggestions of 3 people, and still not working. Getting confused as to whose recommendation I should follow, and if I should combine them. If anyone would be so kind as to continue to help me, hopefully am close. Apologies if I did something wrong, I am not a coding or wordpress expert.

THANKYOU t-p! I added your code, thankyou and that collapsed the pages. I then instead of having landing pages for each of the 7 topics i made post categories and hoped. At this point on the mobile the menus are collapsed, btu wi woudl liek then to uncollapse when clicked. Please let me kwo if I missed anytying.

Here is another website I manage using modern campus where the mobile menu works acceptably collapsing and uncollapsing.

Muhammad I will try your suggestion tomorrow if needed. Just want to have a good backup/stopping point to call tech support incase something goes wrong.