MegaMenu D7 MiniPanels Question

aselby

Wed, 01/31/2018 - 16:06

I am using AdaptiveTheme plus MD MegaMenu in a mini panel for my header. The top elements are from left to right:

Logo - MD MegaMenu - Simple 2-link menu

When expanded, I would like the megamenu to span all 3 columns instead of being limited to the column it has been assigned. I'd like it to expand to the width of the entire header mini panel.

Is this possible? I'm not an expert at CSS or JQuery.

Thanks,

cindy

Thu, 02/01/2018 - 03:01

Please send us your site url and explain more

We are not very clear about your request

aselby

Sat, 02/03/2018 - 20:30

Our site is not yet up on the web - I'm building it locally.

I have a header that looks like this (3 blocks inline - logo - your menu - another menu)

When I click on a MD Megamenu link, I want the submenu to span the width of my page, not just the block.

See this example

If I use the settings in your module I can set a width in pixels but it re-sizes the entire block: menu + sub-menu

Is there a way with CSS to make the drop-down menu span the width of my page instead of just the block. If so, would you be able to share that code with me.

Thanks,

cindy

Mon, 02/05/2018 - 05:26

Please copy the following code and paste at the bottom of file md-awemenu.tpl.php in folder md_megamenu/templates/menu

<style>
    .awemenu-nav.submenu-full-page .awemenu > li.awemenu-item > .awemenu-megamenu{
        width: calc(100vw - 20px) !important;
    }
</style>
<script>
  (function($) { 
    $(document).ready(function() {
        var $megamenu =  $("#md-megamenu-1");
        //init
        setTimeout(changeWidthSubmenu, 1000);
        // resize window
        $(window).resize(function(){
          if(!$megamenu.hasClass('awemenu-mobile')){
            setTimeout(changeWidthSubmenu, 500);
          }else{
            $megamenu.removeClass('submenu-full-page');
          }
        });
        
        function changeWidthSubmenu(){
           if(!$megamenu.hasClass('awemenu-mobile')){
              var megameOffset = $megamenu.offset();
              // add class
              $megamenu.addClass('submenu-full-page');
               //set position left;
              $('.awemenu > li.awemenu-item > .awemenu-megamenu', $megamenu).css('left', '-' + megameOffset.left + 'px');
           }
        }
    
    });
  }) (jQuery);
</script>

Note: You can edit #md-megamenu-1 with your own id megamenu

Please save this change, because this custome code is for you only, so we will not update this in next version

aselby

Sun, 02/11/2018 - 19:57

this worked great - thank you.

I moved the <style> to my SASS files in my theme and I moved the jQuery to my scripts in my theme so updates should not be an issue with this module.

MegaMenu D7 MiniPanels Question

Have More Idea?

We are here to build your website!

MegaMenu D7 MiniPanels Question

You are here

Have More Idea?

We are here to build your website!

Welcome back, Buddy!

Hi New Comer!