Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1472920

    Please can you advise how I can increase the width of my Mega Menu columns in Enfold.

    #1472923

    if you got the newest Enfold – you can set the mega menu as display fixed:

    #top #header .avia_mega_div {
    	position: fixed !important;
    	width: 95vw;
    	top: var(--enfold-header-height);
    	left: 2vw !important;
    	right: 3vw !important;
    }

    if you got a non shrinking header you can do that too for even older enfold versions – but you had to insert your header-height as top value.

    see example : https://basis.webers-testseite.de/

    #1472933

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1473002

    That works beautifully, thank you so much.

    #1473097

    Hi Rikard
    Firstly, thank you for your assistance. I now have another question – not sure if I should start a new thread. My Mega Menu is big which is fine for a laptop or desktop but on a mobile, it is a lot of items. Is there a way that I can bold the headings of the Mega Menu so that on the mobile you can differentiate between the headings and the actual product pages?

    #1473112

    Hi,

    Thanks for the update. Could you post a link to where we can see the elements in question please?

    Best regards,
    Rikard

    #1473114

    Hi Rikard,

    In private link

    #1473135

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #av-burger-menu-ul > li > a {
      font-weight: bold;
    }

    Best regards,
    Rikard

    #1473220

    Good morning Rikard

    Thank you for this, but unfortunately this did not work.

    #1473228

    Hi,

    Could you share a screenshot highlighting what you would like to achieve please?

    Best regards,
    Rikard

    #1473249

    Hi Rikard
    here is my screenshot
    https://img.savvyify.com/image/Screenshot-20241209-161530-Chrome.9xca8

    the menu on a mobile is big so I would like the sub headings to be bolder or even blue #20316d so that they stand out from the sub-sub headings.

    Hope this makes sense.

    Regards

    #1473266

    Hi,

    Please try this instead:

    #av-burger-menu-ul > li > a {
      font-weight: bold !important;
    }

    Best regards,
    Rikard

    #1473295

    Hi Rikard

    I have already tried that option, unfortunately does not work

    Regards

    #1473307

    Hi,

    The login token has expired, please post a new one.

    Best regards,
    Rikard

    #1473317

    maybe you can get comfortable with not having all top-level menu items open with a drop down.
    You could, for example, only have one of them open at a time. When you click on another one, the one open menu item closes.

    #1473320

    Hi Guenni007

    That could definitely be an option.

    At Rikard, I will redo the link

    #1473324

    Well enfold provided the option to only show submenu items on hover or on click.

    If you choose click we can edit that to only show one toggle open.
    then put this to your child-theme functions.php:

    function only_one_submenu_open_on_burger(){
    ?>
    <script>
    window.addEventListener("DOMContentLoaded", function () { 
      (function($) {
        $('body').on( 'click touch', '.av-active-burger-items > a', function () {
          $(this).parent('li').siblings().removeClass('av-show-submenu');
          $(this).parent('li').siblings().find('ul').slideUp( "fast");
        });
        $('body').on( 'click touch', '.av-active-burger-items .av-width-submenu > a', function () {
          $(this).closest('.sub-menu').siblings().find('li').removeClass('av-show-submenu');
          $(this).closest('.sub-menu').siblings().find('ul').slideUp( "fast");
        });
      })(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'only_one_submenu_open_on_burger');

    after doing that i will have a look to your site to optimize if needed.

    #1473382

    And maybe you decide to have the burger-menu on top:

    #top #header #av-burger-menu-ul {
      vertical-align: top;
      padding: 125px 0 !important;
    }
    #1473418

    Hi,

    The CSS is applying on your site, please clear your browser cache if you can’t see any difference.

    Best regards,
    Rikard

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