Select Page

Menu dropdown

Home Forums Divi Engine General Menu dropdown

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Helpful
    Up
    0
    Down
    Not Helpful

    Hi!
    How do I get my menu to not show the subitmes on resposive items? The “mega menu” is expanded (but another menu item which does not use mega menu is showed with dropdown list). That is what I want for the mega menu too. Can you please advice how to make it?
    dev2.nyhemsida.eu
    Thank you.

    Helpful
    Up
    0
    Down
    Not Helpful

    I would also like to have scrolling function to the menu on mobile

    Helpful
    Up
    0
    Down
    Not Helpful

    Are you wanting to remove the mega menu on mobile? If so here is how you do this: https://diviengine.com/how-to-show-divi-mega-menu-on-desktop-only/

    Helpful
    Up
    0
    Down
    Not Helpful

    Sorry for not being clear.
    I have hided mega menu on mobile as described on your link.
    But in order to make the mobile menu shorter, I want to make child menu items hidden (only visible with drop down). I found that I can solve this by adding the following in body:

    <style type="text/css">
    #main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
    #main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
    #main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
    #main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
    #main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important;  transition: all 1.5s ease-in-out;}
    #main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
    </style>
    <script type="text/javascript">
    (function($) {
          
        function setup_collapsible_submenus() {
            var $menu = $('#mobile_menu'),
                top_level_link = '#mobile_menu .menu-item-has-children > a';
                 
            $menu.find('a').each(function() {
                $(this).off('click');
                  
                if ( $(this).is(top_level_link) ) {
                    $(this).attr('href', '#');
                }
                  
                if ( ! $(this).siblings('.sub-menu').length ) {
                    $(this).on('click', function(event) {
                        $(this).parents('.mobile_nav').trigger('click');
                    });
                } else {
                    $(this).on('click', function(event) {
                        event.preventDefault();
                        $(this).parent().toggleClass('visible');
                    });
                }
            });
        }
          
        $(window).load(function() {
            setTimeout(function() {
                setup_collapsible_submenus();
            }, 700);
        });
     
    })(jQuery);
    </script>

    BUT this brokes the display of the mega menu columns on desktop. Is there a way to solve it?
    Thank you.

    Helpful
    Up
    0
    Down
    Not Helpful

    Oh I see.

    Can you send me a link to the site so I can checK?

    Helpful
    Up
    0
    Down
    Not Helpful

    Link: dev2.nyhemsida.eu

    Helpful
    Up
    0
    Down
    Not Helpful

    Have you removed the code as it is showing fine on desktop?

    Helpful
    Up
    0
    Down
    Not Helpful

    The problem is not on desktop! It is on mobile and tablets. The menu is to long. Please take a look at the printscreen: http://dev2.nyhemsida.eu/support/Screenshot11%2020-56-40.jpg
    I can not scroll to see the hole menu on mobile. I would like to solve 2 things:
    – make menu scrollable on mobile and tablets
    – show the child items in menu with dropdown, as the menu items in “om oss” (please see print screen http://dev2.nyhemsida.eu/support/megamenu.jpg)

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

You must be logged in to reply to this topic.