MegaMenu not displaying as "responsive"

Home Forums Mustang MegaMenu not displaying as "responsive"

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9446

    Anth33
    Participant

    MegaMenu not displaying as "responsive"

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi
    I recently began using Megamenu on my site.

    The Megamenu is displaying properly on my large screen at 1980×1200, but when I reduce the browser size or view the site on a mobile phone, the megamenu is malfunctioning. A white bar appears where the menu items should appear and then simply freezes.

    Why might this be happening? Is there some code conflict between Mustang and Megamenu? I’d very much appreciate step-by-step instructions if I have to go in and change some code. Thank you very much
    R.A.

    #9450

    Oliver Juhas
    Keymaster

    Hi,

    Do you mean a Megamenu plugin? The theme was never tested with such plugin, but if it works on desktop then it should on mobile too. It must be just a matter of mobile CSS styles or something. Please contact the plugin developer for help with the issue.

    Regards,

    Oliver

    #9504

    Anth33
    Participant

    Hi Oliver,
    I wrote to the developer of Max Megamenu at his support site https://wordpress.org/support/topic/responsive-megamenu-is-not-working-help?replies=5#post-6602615.

    He had a look at my site, and recommended this as the fix:

    You will need to edit your header.php file (Appearance > Editor, select header.php on the right), then:
    Find:
    <nav id=”nav-main” class=”nav-main clearfix” role=”navigation”>

    Replace with:
    <nav role=”navigation”>

    However, when I went to Appearance-Editor-header.php for Mustang, I wasn’t able to find anything about “<nav id=”nav-main” class=”nav-main clearfix” role=”navigation”>”. Is it in a different location in Mustang? Perhaps you can help me resolve this.

    Also, do you have a preferred MegaMenu plugin? I’m going to experiment too with WRMegamenu http://www.woorockets.com/plugins/wr-megamenu/
    However, I’d prefer to be using one that you recommend.

    Thank you!

    #9507

    Oliver Juhas
    Keymaster

    Hi,

    The code you are looking for is located in setup/setup.php file (https://github.com/webmandesign/mustang-lite/blob/master/setup/setup.php#L1385). I recommend overriding it via a child theme‘s functions.php file like this:

    wm_remove_nav_id_and_class( $nav ) {
     return str_replace( 'id="nav-main" class="nav-main clearfix" ', '', $nav );
    }
    add_filter( 'wmhook_wm_section_navigation_output', 'wm_remove_nav_id_and_class' );
    

    Please note that this is a modification of a theme and I will not provide support on any issues related to this once you change the code. I don’t quite understand why the navigation ID and classes has to be removed. There should be an easy CSS fix for your issue.

    Also, please note that the theme includes a megamenu functionality so I have never tested it with any megamenu plugin and actually I have never used any of those. I don’t think there is a “general, for all” megamenu plugin solution out there.

    Regards,

    Oliver

    #9542

    Anth33
    Participant

    Thanks Oliver!
    I’ve read in many places that making a child theme is a good idea because it ensures that custom layouts we create our site will not be affected by updates to the overall theme. Do you recommend against creating child pages? I’m not at all convinced that I need one and indeed am have much to learn about WordPress and how to set up a website. I certainly don’t want to set up a child-theme and lose Webman support.

    I’ve been testing our the Mustang built-in megamenu and found it to be very nice. The Max Megamenu is having 2 problems: 1) it is not working “responsively” on smaller screens; 2) the hover effect is not working.

    My problem now is that I quite honestly cannot figure out the instructions in the Mustang user guide. I disabled the Max Megamenu and followed the Mustang Manual instructions for using the built-in megamenu. But I am getting random results.

    The instruction state: “please set a megamenu columns-3 classes on the 1st level menu item (so, the parent menu item). You can specify the submenu columns with columns-2, columns-3, columns-4 or columns-5 classes.

    But when I set each 1st level menu item to “megamenu columns-3”, a random number of columns are appearing: never just 3 columns.
    I am also confused about what I should input for the 2nd level menu items.

    Please see the attached screenshot with questions. I’m wondering how to set the built-in Megamenu to display exactly the number of menu level 1 columns I want, with menu level 2 items neatly underneath.

    Perhaps the Mustang manual could be updated with clearer instructions on how to set up the excellent megamenus that you provided

    Thank you very much!
    Ray

    #9551

    Oliver Juhas
    Keymaster

    Hi Ray,

    “Do you recommend against creating child pages?” – I encourage you to create a child theme (and also child pages ;) ) when modifying the theme. You see from all of my previous posts that I say “override it via a child theme” and always link to how to create one in theme’s user manual at http://www.webmandesign.eu/manual/mustang/#child-theme .

    You will not loose any support when creating a child theme. I only don’t provide support for theme modification as it would be your code, so you need to know what you’re doing. http://support.webmandesign.eu/support-policy-and-terms-of-service/

    As for megamenu columns, this should work. Can you please grant me admin access to your website so I can check?

    The 2nd level of megamenu item works as column heading/title. Actually, this is mentioned in the theme’s user manual http://www.webmandesign.eu/manual/mustang/#menus-mega Also look at the image provided (clicking the image will make it larger).

    I think the user manual is quite clear about megamenus and I really don’t know how to improve it in this manner. Please try to install the demo content to see how the megamenu is set up.

    Also, please note that there is no such thing as .megamenu .columns-1 as this is pretty much a simple submenu. Megamenu alows you to create multicolumn submenus.

    As stated in user manual:

    • 1st level menu item is wrapper for your megamenu and as such it should be set with class of megamenu and a class for how many columns you want to display in it columns-2 TO columns-5.
    • 2nd level menu item within your megamenu wrapper is a column title/heading. If you don’t want to display a title for the column, just set the “Navigation label” to -.
    • And finally, the 3rd level menu item withing your megamenu wrapper are the actual column menu items. So, you should set these for each column title (for each 2nd level menu item).
    • 4th level menu items are not being displayed in megamenu.

    The get-builtin-megamenu-to-show-2-columns-land-like-this.png screenshot you’ve posted is not able to achieve with megamenu as you have actually “Photographic equipment” and “Other gear” below each other. These would be a column headings/titles in megamenu and columns can not be placed below each other.

    Hope I’ve made it a bit clearer and helped a little.

    Regards,

    Oliver

    #9559

    Anth33
    Participant

    Hi Oliver!
    Thank you for your reply.

    I ‘d be very happy to grant you admin access to my site. If you could help me out with those menus or other apparent problems, I’d greatly appreciate it. Where should I send the info? I can be reached at [ADMIN EDIT: REMOVING THE EMAIL]

    Regarding child themes- thanks for explaining this a bit more. I’ll read the manual and search on Youtube to see if I can understand it more clearly. I’m still not sure if I need one or not, or what benefits it will bring me with the current design of my site.

    I think you explained the megamenu system above far more clearly than it is explained in the manual. I’ll experiment and once I figure it out, I’ll write out a simplified version for my notes.

    Sincerely,
    R.A.

    #9563

    Oliver Juhas
    Keymaster

    Hi,

    Like I mention in point 2 of terms of service page (I’ve linked to it above) you should mark you post as private when sending a login data to your website. When you reply to this post, there is a “Set as private reply” checkbox below the textarea in the form. Just check it out and submit your reply.

    Regards,

    Oliver

    #9573

    Anth33
    Participant

    This is a private reply!

    This reply has been marked as private.
    #9592

    Oliver Juhas
    Keymaster

    Hi,

    Can you please also post a login link?

    Thanks!

    Oliver

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.