Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 25, 2016 at 2:10 pm #621304
    foveaworks

    Hey there at Kriesi Support,

    i wanted to install a different menu for the responsive menu and i’ve followed the steps provided in your documentation:

    Changing the menu on mobiles

    In the menu admin I now get the option to save the menu for mobile and the menu shows up on the page.
    However there are some problems:
    – This menu does not support second level menu items. I can define them in the admin, but they don’t show up if i click on the first level.
    – There seem to be some “ghosty” menu items at the very bottom of the menu. The menu somehow extends in lengh and shows these items at the very bottom. They seem to be coming from the main menu.
    – (Not so important but it might be a hint) In the Menu Admin it doesn’t show the actual themename anymore. Instead it says “THEMENAME Responsive Menu” and for all the other menu postions as well

    Could you please have a look at this. Could it be that the tutorial is somehow outdated for the latest version of enfold and its framework?

    best regards
    Niko

    April 27, 2016 at 12:32 pm #622973
    Josue

    Hi!

    The article is a bit dated, I’d suggest you a different approach, in the same menu congregate all menu items (desktop and mobile) and set a CSS class to each item respectively (‘noMobile’, ‘noDesktop’).

    Also add this to Quick CSS:

    @media only screen and (min-width: 767px) {
.noDesktop{display: none !important; }
}

    Regards,
    Josue

    June 9, 2016 at 4:53 am #645204
    saucyhotdesign

    Hi – how do I add the css class to the menu items please? Alternatively is there an easy way to have a different simplified mobile menu show instead of the main menu? If I simply select to make the mobile version work like an accordian under the theme settings, then the top level pages cant be accessed as they become only clickable to open and shut the accordian… I just want the top level pages (and no submenus are required) to show on a mobile, so happy to use a secondary menu, or hide sub menu items…

    June 9, 2016 at 9:21 am #645313
    foveaworks

    Hey saucyhotdesign,

    in my case i used this css as i was using the mobile menu on tablet dimensions as well

    @media only screen and (min-width: 990px) {

	.nodesktop {display: none;}
}

@media only screen and (max-width: 990px) {

	.nomobile {display: none;}
}

    For setting the css classes: In the menu admin page at the top right there is a button “screen options”. You can activate css classes there and then set them for each menu item individually.

    This method is a bit of work because you have to duplicate then menu items and then set the css classes accordingly, but i workes like a charm

    have fun

    June 9, 2016 at 4:21 pm #645530
    Josue

    Hi,

    Pretty much what @foveaworks said, i’ll re-visit the documentation article and find if there’s a way to do it more easily.

    Best regards,
    Josue

    June 10, 2016 at 1:14 am #645891
    saucyhotdesign

    Thanks. This is working well for me – all I have needed to do is add a couple of links to the main top level page as the first sub menu page, with the class ‘nodesktop’ assigned, and have this in my child theme css
    @media only screen and (min-width: 769px) {
    .nodesktop {display: none;}
    }
    They’re all working perfectly (only show up in the accordian mobile menu, and not on desktop, making it possible to navigate to the top level page) except the one that is inside a ‘mega drop down menu’ which is also showing up on desktop. Any ideas why?

    June 14, 2016 at 4:09 am #647742
    Ismael

    Hi,

    Are you referring to the Products > T-shirt or Hoodies menu item etc? By default, those items are not clickable on mobile unless the “Hide Mobile Menu Submenu Items” in the Header > Mobile Menu panel is deactivated.

    Best regards,
    Ismael

    June 17, 2016 at 12:37 am #649469
    saucyhotdesign

    Hi Ismael. I don’t think you have read properly what I am trying to do and what has worked and what needs fixing? I will try to explain again…

    I have a large menu as you will see on the link I provided. Too large for good mobile navigation, so I have selected ‘Hide Mobile Submenu Items’ so that it uses the simplified accordian for the mobile menu. However, this means the top level menu items that have submenus are not clickable, and my client would like them to be. So I tried the fix suggested on here – adding another submenu item to the top of all the submenus that is hidden on desktop, visible on mobile, that links to the top level page.

    This has worked well for me on all the plain sub menus, but the products submenu is a multi column ‘mega menu’, and for some reason the extra sub menu item in that mega menu is showing up on desktop instead of being hidden. How can I fix this?

    June 20, 2016 at 4:56 am #650578
    Ismael

    Hi,

    I see. Add the !important rule after the css value:

    @media only screen and (min-width: 769px) {
.nodesktop {
    display: none !important;
}
}

    Best regards,
    Ismael

    June 24, 2016 at 2:35 am #652791
    saucyhotdesign

    Thank you – that worked.

    However one other thing is not looking quite right. The menu’s large drop down mega menu under ‘products’ used to display 2 neat rows of 6 columns. Now it is displaying a row of 5, then 6, then 1… Any ideas? Temporary login in private data below.

    July 10, 2016 at 8:00 am #658897
    Ismael

    Hi,

    It looks good on my end. It’s still displaying in two rows. Could you please provide a screenshot of the issue?

    Best regards,
    Ismael

    July 12, 2016 at 12:07 am #659586
    saucyhotdesign

    Hi – it took too long to get a response and the client was unhappy with how it looked so I had to remove the extra desktop-hidden products menu button to ‘fix it’. I have some screenshots – how do I send them to you? I have also added it back for now so if you can look in the next few hours you will see the issue.

    July 12, 2016 at 1:22 pm #659814
    Rikard

    Hi,

    You can post screenshots to a service like dropbox or google drive and then link to them here.

    Regards,
    Rikard

    July 13, 2016 at 12:28 am #660160
    saucyhotdesign

    Ok – posting link in private below.

    July 15, 2016 at 4:10 am #661119
    Ismael

    Hi!

    The mega menu considers the duplicated “Product” menu item as the first column. Instead of adding a duplicate, try the solution provided in the following thread which creates some kind of “go to this page” link on mobile view. You can replace the text with an arrow or anything you want. https://kriesi.at/support/topic/mobile-menu-links/#post-637296

    Regards,
    Ismael

    December 19, 2016 at 10:54 pm #726314
    smilefactory

    Hi, I was wondering if there is a way to have a split mobile menu like e.g. avada theme has? I run a website with over 150 subpages and lots of submenu items and this workaround with the non clikable menu drives me mad. I´m very happy with enfold but I consider that this mobile menu issue is a major drawback for such a awesome theme like enfold. Do you see here a chance to improve this issue?

    December 28, 2016 at 7:44 pm #728385
    Yigit

    Hi,


    @smilefactory     Please feel free to request – or vote if already requested – such feature on Enfold feature request form. Please include examples as well :)

    Enjoy your holidays!

    Best regards,
    Yigit

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