Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #177964

    I’m working on a site that uses Enfold (version 2.3.3). Both the parent theme (not modified) and the child theme are not properly generating the mobile menu. The icon never appears and is just a blank space (iPad size, etc.) until I get down to iPhone size where it shows a drop down (no icon). I’m stuck trying to figure out how to get this sucker to work as having mobile navigation is an important thing.

    #177965
    This reply has been marked as private.
    #178089

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .responsive .mobile_menu_tablet .main_menu { display: block; }

    It is set to “display: none” for some reason

    Cheers!
    Yigit

    #178130

    Hi,

    Thanks! That at least brings it back for the tablet responsive size but it’s not the Icon like in the Enfold demo; it’s just a regular dropdown. Any ideas why?

    Cheers,
    Amber

    #178131

    Hi!

    Please go to Enfold theme options > Header and choose to display “Display as Slide Out Menu” in Responsive Header Main Menu http://i.imgur.com/4LWiIMn.jpg

    Best regards,
    Yigit

    #178156

    Hi,

    Again, thanks bunches, the Icon is now showing up! Only thing I thought to note is that if you set the Header to “Display as Slide Out Menu” and manually add the CSS:

    .responsive .mobile_menu_tablet .main_menu { display: block; }

    It breaks the layout a bit and causes the navigation to show until the responsive size gets closer to smartphone size. I had to remove that bit of CSS after selecting “Slide Out Menu”.

    One last question would be… when using the Slide Out menu, and scaling down to smartphone size, it’s overlapping my logo (which is fairly long), do you have any suggestions on how to get around this?

    Cheers,
    Amber

    #178158

    Hey!

    Please try adding following code to Quick CSS

    @media only screen and (min-width: 480px) { .responsive .mobile_slide_out .logo { margin-left: -20px; }}

    It will decrease left margin on screens smaller than 480px

    Cheers!
    Yigit

    #178321

    Hey Yigit,

    The suggested CSS just caused the left half of my logo to get cut off. I actually got it working by changing the height of .responsive .logo. Here is the CSS that worked for me; in case anyone else runs into this with a longer logo:

    @media only screen and (max-width: 480px) { .responsive .logo { height: 76px !important; }}

    Thanks for all the help!

    #178398

    Hi!

    Glad you figured it out and thanks for sharing! Let us know if you have any other questions or issues

    Best regards,
    Yigit

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Mobile Menu Not Displaying’ is closed to new replies.