Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 20, 2013 at 12:31 am #177964
    creative.collab

    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.

    October 20, 2013 at 12:32 am #177965
    creative.collab
    This reply has been marked as private.
    October 20, 2013 at 4:53 pm #178089
    Yigit

    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

    October 20, 2013 at 6:50 pm #178130
    creative.collab

    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

    October 20, 2013 at 7:02 pm #178131
    Yigit

    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

    October 20, 2013 at 8:08 pm #178156
    creative.collab

    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

    October 20, 2013 at 8:24 pm #178158
    Yigit

    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

    October 21, 2013 at 9:06 am #178321
    creative.collab

    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!

    October 21, 2013 at 1:56 pm #178398
    Yigit

    Hi!

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

    Best regards,
    Yigit

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