Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 7, 2016 at 5:29 am #579122
    bowmandesign

    The enfold team added a great fix for the main mobile menu on iOS, ensuring the correct triangle bullet.
    https://kriesi.at/support/topic/avia-bullet-in-mobile-menu-changes-to-undesirable-icon-on-ios-9-0-2/

    Here is the original fix,
    #mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
    content: “\25BA”;
    }

    However, the same problem happens on the mobile menu version of the Fullwidth Sub Menu. What is the fix for this?

    When a user leverages the Fullwidth Sub Menu and selects, ‘Display a button to open menu (works best for menus with a lot of menu items)’ and also check the box, ‘Hide Mobile Menu Submenu Items: By default all menu items of the mobile menu are visible. If you activate this option they will be hidden and a user needs to click on the parent menu item to display the submenus’ the triangle goes away on mobile and displays a strange version of it.

    I’m sure the fix is the same, but I need to know the classes to apply it to and the secret order?

    Thanks,

    February 9, 2016 at 8:28 am #580199
    Ismael

    Hi bowmandesign!

    Thank you for using Enfold.

    Please try this css code:

    .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before {
content: "\25BA";
}

    Cheers!
    Ismael

    February 9, 2016 at 6:10 pm #580495
    bowmandesign

    Sorry, doesn’t work.

    Your fix adds it to the submenu, not the mobile version of the submenu.

    Thanks

    • This reply was modified 8 years, 10 months ago by bowmandesign.
    February 11, 2016 at 6:35 pm #581812
    Yigit

    Hi!

    Please update Enfold to the latest version 3.4.7 – http://kriesi.at/documentation/enfold/updating-your-theme-files/ or add following code to Quick CSS 

    .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before {
    content: "\25B6";
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    February 11, 2016 at 6:59 pm #581825
    bowmandesign

    Hi Yigit,

    I developed and launched this site, while always up-to-date, @ 3.4.7

    Sorry to say, still does not work.
    .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before {
    content: “\25B6”;
    }

    The > sign is not converting to a special character in the quick css field.

    Really looking forward to solving this.

    I also removed all other CSS and plugins and have thoroughly tested this. Still does not work. Any ideas?

    February 14, 2016 at 6:58 am #582837
    Rikard

    Hi,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    February 16, 2016 at 12:11 am #583829
    bowmandesign

    Thanks

    February 18, 2016 at 6:53 am #585189
    Ismael

    Hey!

    The codes are working, the problem is the arrow color which is the same as the menu background. Replace the code with this:

    @media only screen and (max-width: 1200px) {
.responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before {
    content: "\25B6";
    position: absolute;
    top: 15px;
    margin-left: -10px;
    font-family: 'entypo-fontello';
    font-size: 7px;
    color: #ffffff;
}
}

    Adjust the color value.

    Best regards,
    Ismael

    February 18, 2016 at 10:07 pm #585738
    bowmandesign

    Hey!

    You are missing the point, you cannot trouble shoot this on a desktop. You have to look at it on iOS {iPhone, iPad, etc…}

    I am aware of the color, that is not the issue.

    Please test on iOS and see the iOS icon, it is not the correct triangle.

    Enfold submenu iOS

    I would like to address this, just as we have here,
    https://kriesi.at/support/topic/avia-bullet-in-mobile-menu-changes-to-undesirable-icon-on-ios-9-0-2/

    Note, the above fix does not work on the submenu in iOS and it still yields a strange icon on iOS.

    It’s been 11 days since my post and I really hope to get this fixed.

    Best Regards,
    Bowman

    • This reply was modified 8 years, 10 months ago by bowmandesign.
    February 22, 2016 at 6:24 am #586862
    Ismael

    Hi!

    Alright. The arrow is being covered by the ios default list icon. Try to set the list style to none:

    #top .av-subnav-menu > li {
    list-style: none !important;
}

    Regards,
    Ismael

    February 22, 2016 at 4:14 pm #587240
    bowmandesign

    No luck. Did not work.

    February 22, 2016 at 7:17 pm #587403
    Yigit

    Hi!

    I adjusted your code a little and confirmed that it is working fine on IOS9. Please review your website (screenshot in private content field)

    Regards,
    Yigit

    February 22, 2016 at 8:19 pm #587433
    bowmandesign

    Hi Yigit,

    Thank you.

    I thought documenting your change might help other customers who are facing the same challenge, as your change was not to my code, but rather Enfold’s code published by the Enfold team in the forum.

    There seems to be delta in addressing the iOS icon challenge/fix in the Enfold main Menu vs. the Enfold Fullwidth Sub Menu.

    Enfold main Menu
    ( While this works for the Enfold main Menu on iOS, the CSS does not work on the Enfold Fullwidth Sub Menu )
    https://kriesi.at/support/topic/avia-bullet-in-mobile-menu-changes-to-undesirable-icon-on-ios-9-0-2/

    Fullwidth Submenu
    ( Note Josue’s comment on May 23, 2015 at 8:02 am, line 16)
    https://kriesi.at/support/topic/how-to-make-full-width-sub-menu-transparent/

    His code has,
    .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: “\25B6”; position: absolute; top: 15px; margin-left: -10px; font-family: ‘entypo-fontello’; font-size: 7px;}

    Above, in this topic, both you and Ismael also suggested the same code,
    content: “\25B6”;

    While your new fix shows the actual triangle character
    .responsive #top .av-menu-mobile-active .av-subnav-menu > li a:before{content: “►”; position: absolute; top: 15px; margin-left: -10px; font-family: ‘entypo-fontello’; font-size: 7px;}

    Thank you for your help,

    February 23, 2016 at 12:04 pm #587640
    Yigit

    Hey!

    You are welcome! Thank you for documenting the changes :)

    If you have any other questions or issues, please feel free to start a new thread!

    Cheers!
    Yigit

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.