Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 18, 2014 at 5:35 pm #370091
    Dersan

    Hi there,
    first of all Enfold is a beautiful Theme – thanks therefor!

    I would like to make some changes on the responsive mobile menu

    1) i increased the font size trough the style.css – side effect: the lil arrows are not anymore centered to the text.
    i gave them a 3% margin top but than i realized that this will only look ok on my iphone6 screen but not on other mobile screen resolutions.
    going through the helper-responsive-megamenu.php i couldn’t find the right spot to change that positioning dynamically.

    any tips how to get the arrows vertical centered within the outer <li> so they fit always to the font size ?

    2) i would like to add a Logo beside the close button but again i cant see how. Logo should use like max 80% of the available hight and never touch the close button. Any tips are welcome.

    3) i would like to have the social icons within the mobile nav at the bottom and centered. my menu leaves on all mobile devices enough space to the screen as the sub-menus as closed. I think best ist to add 3 more rows as the menu needs, leave the first two blank and insert the $social in the third. Again, any suggestions are welcome.

    [ 4) it would be nice to have the lil arrows only in front of menu entry’s who have a sub-menu and to get them changed to up-looking arrows when the sub-menu is opened but i assume thats a lil more coding? maybe someone realized that already ?]

    thats it for now – thanks for any helping!

    • This topic was modified 10 years ago by Elliott.
    December 18, 2014 at 11:23 pm #370284
    Elliott

    Hi Dersan!

    1. Try this instead.

    #mobile-advanced li > a:before {
    margin-top: 12px;
}

    2. Try adding a background image to this.

    .avia_transform3d .show_mobile_menu #mobile-advanced {  }

    3. I don’t see an easy way of going about this unfortunately. You could probably get some added in via javascript but that would take a lot of time and code and would have to be considered custom work.

    4. Same thing here. It would be best to hire a freelancer to help you out with these customizations.

    Best regards,
    Elliott

    December 18, 2014 at 11:26 pm #370288
    Ismael

    Hey Dersan!

    Thank you for using Enfold.

    1.) You can use media queries to adjust the top margin on different screen size:

    @media only screen and (min-width: 480px) and (max-width: 768px) {
#mobile-advanced li > a:before {
margin-top: 2%;
}
}

    2-3.) I’m sorry but this will require modification that is beyond the scope of support. Please hire a freelance developer to configure the mobile menu.

    4.) You can request the feature on our Feature Requests page.

    Best regards,
    Ismael

    December 19, 2014 at 6:47 am #370451
    Dersan

    Hi Elliott & Ismael,

    thanks for your help – No.1 & 2 all good now!
    For 3 i tought it might be not that hard as the php file who generates the output has allready the social icon bar in hand, anyway, Thx again!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Customizing mobile menu’ is closed to new replies.