sub menu items on mobile are no longer visible

Hi John,

This could be a plugin conflict - can you try #1 on this page? https://docs.generatepress.com/article/debugging-tips/

Let us know.

Just checked again with my phone and it seems to be working now?

Hi Leo

yea, your guidance got me in the right direction, it appears that you guys made a change in the css templates for mobile at some point and my child theme had some overrides for that I guess.

I activated the main GP theme and it worked, so i found this code

	.sub-menu.toggled-on,
	.children.toggled-on {
		display: block !important;
opacity: 1!important;
	}

but the old style was missing the opacity line so I added that in, still not sure what the display none opacity 0 is a hard coded style element?

thanks

hmm a bit more help perhaps the extra code that i had to make the phone number click to call doesnt seem to work anymore either

add_action( 'generate_inside_mobile_menu', 'generate_add_mobile_menu_content' );
function generate_add_mobile_menu_content()
{
	echo '<span class="mobile-content"><a href="tel:6479779115">Call (647) 977-9115</a></span>';
}

Tom helped me with this hack before, but not sure why (it still acts as a link, it just doesnt activate the call feature of the phone)

The JS adds the inline CSS.

As for your phone number, you're going to have to change things a bit as HTML isn't allowed in <button> elements.

add_action( 'generate_inside_navigation', 'generate_add_mobile_menu_content' );
function generate_add_mobile_menu_content()
{
	echo '<span class="mobile-content hide-on-desktop"><a href="tel:6479779115">Call (647) 977-9115</a></span>';
}

Then try this CSS:

.mobile-content {
    float: left;
}

.menu-toggle {
    float: right;
}

Thanks Tom, one minor issue still the menu line ends up on a different line than then phone number now?

thanks a ton

John

oh and how to hide it on tablets as the phone shows up on top of regular menu too? should only show on mobile menu?

NM i got this solved with another media query

@media screen and (min-width: 768px) and (max-width: 9999px) {
    .mobile-content.hide-on-desktop a {
    display: none;
  }
}

thanks again, i got the menu to line up now with this

  .menu-toggle {
    width: 110px!important;
}

Glad you got it working :)