Home Forums Weaver Xtreme Theme Using @media max-width to trigger footer menu to collapse to hamburger menu

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #69685
    JayDub
    Participant

    I have a WeaverX (not plus) child theme created.

    I used the defaultWP feature to create a custom menu called footer.

    I used the WP Widgets to create a Navigation Menu Widget in the Footer Widget Area and selected it to show my “footer” menu.

    So now I have a great menu in my footer, and all is good.

    But how do I force that menu to collapse when it is to wide for the screen?

    I thought it might happen automatically, but it does not.

    My Main Menu collapses, and I see there is a span class called “wvrx-menu-button collapsed mobile-menu-closed” There is no such open or closed menu state created when generating my footer menu.  Why not? Isn’t that why I would use the WP menu feature instead of making my own?

    I was hoping it would be as simple as some CSS code to hide the normal menu and display the hamburger one that would look something like this,

    @media screen and (max-width: 500px)
            .menu-footer-full  {display:none}
    
            .menu-footer.collapsed {display:inline}

    but I dont understand menus enough to undertand how that hamburger view is automatically generated, or how to force it to display.

    Can someone shed some light on this?

     

    #69688
    Weaver
    Keymaster

    Simply put, the theme is designed to handle only the primary and secondary menus for mobile devices. There is JavaScript that generates the appropriate classes dynamically. I’m not positive, but I don’t think @media CSS is used to generate the mobile menus.

    Note that clicking on the hamburger also triggers JavaScript to change classes on the mobile menus. The layout of the mobile menus is totally different than the standard, and simple @media rules can’t dynamically change the classes.

    #69689
    JayDub
    Participant

    Thank you for your reply.  Yeah, I am sure @media does not generate any menus, it just allows me to display what html is there. I was hoping there was going to be something like a menu-compressed section of code created there automatically because I was using WP built in menuing.

    So, as an alternative, can I use a weaverx secondary menu and put it in the footer?  there does not seem to be an option for that directly, but is there a workaround to achieve that?

    I was hoping to have a main menu with just a few child items in the header, and a  more robust menu with more child items down in the footer.  Is there a way to control the two menus so they have different items?

    #69691
    Weaver
    Keymaster

    Weaver only supports the primay/secondary menus as part of the header area.

    There might be menu plugin that could be used in the Footer HTML or Widget area, or even the post footer HTML injection area. I think you could even use @media to display a different menu look for mobile, but expanding a hidden menu requires JavaScript which might be part of a menu plugin.

    It would not be impossible to add a bit of JavaScript to duplicate that in a custom menu. The code is not big.

    #69694
    scrambler
    Moderator

    The solution is to get the Plus plugin.

    That will give you extra menu shortcode and the extra menu widgets that you will be able to use to insert fully functional mobile menus, and have these collapse to the hamburger menu like the primary and secondary

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