[Resolved] sub menu items on mobile are no longer visible

Home Forums Support sub menu items on mobile are no longer visible

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #265112
    John MacKenzie

    Hi Tom

    not sure when this happened but some update at some point in the last 6 months has caused the drop down menu on mobile devices to not be visible. You can click on it, and it brings the menu down but the text is not visible. in the code i see this seems to be hard coded on the the element:

    <ul class=”sub-menu toggled-on” style=”display: none; opacity: 0;”>

    I tried adding some override css but it doesnt touch it.

    any thoughts?

    you can view at http://www.torontoresumewriting.com

    thanks!

    #265125
    Leo
    Staff
    Customer Support

    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.

    #265143
    Leo
    Staff
    Customer Support

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

    #265163
    John MacKenzie

    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

    #265174
    John MacKenzie

    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)

    #265176
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #265195
    John MacKenzie

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

    thanks a ton

    John

    #265196
    John MacKenzie

    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;
      }
    }
    #265244
    John MacKenzie

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

      .menu-toggle {
        width: 110px!important;
    }
    #265264
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.