Full width submenu horizontal scroll

Hey cryptotradingbg-com,

Thank you for the inquiry.

The following css code should make the submenu container scrollable when the content or menu items overflow on mobile view.

#top .av-submenu-container .container {
    overflow: scroll;
}

Please make sure to purge the cache or toggle the file compression after adding the css code.

Best regards,
Ismael

Hi,

Thanks for the update. That is not the correct place, please try it under Enfold->General Styling->Quick CSS instead.

Best regards,
Rikard

Hi,

Thank you for the update.

Did you toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css? Please provide the site URL so that we can check the modification further.

Best regards,
Ismael

Hi,

Thank you for following up.

Yes, you may need to disable the file compression settings temporarily. You could also set the sub menu to display as an icon or as a button on mobile view and smaller screens. The option can be found in the Advanced > Responsive > Mobile Menu Display settings.

Best regards,
Ismael

Hi,
To not have a menu icon in mobile for your sub-menu please change the Mobile Menu Display option to Display Full Menu

As for having a sticky sub-menu on mobile, I have a solution that works on an Enfold install, but it doesn’t seem to work on your site, perhaps due to your sub-menu has the menu button showing right now, but you can try.
Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($){
  $(function() {       
     var scroll_start = 0;
     var startchange = $('#sub_menu1');
     var offset = startchange.offset();
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top) {
          document.getElementById('sub_menu1').classList.add('sticky-top');
         } else {
          document.getElementById('sub_menu1').classList.remove('sticky-top');
         }
     });
      }
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

and add code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

 .sticky-top {
    position:fixed!important;
    top:0!important;
    z-index:10000!important;
}

if this doesn’t work Please include an admin login in the Private Content area so we can investigate.

Best regards,
Mike

Hi,

We modified the css a bit to override the styles added by css hero.

@media only screen and (max-width: 767px) {
  #top .av-subnav-menu {
    margin: 0;
    max-height: 51px;
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    width: 100%;
    height: 51px !important;
    line-height: 51px !important;
  }

  html>#top>#wrap_all>#main>#sub_menu1>div>#av-custom-submenu-1>li {
    overflow: visible !important;
    display: block !important;
    float: left !important;
    padding-top: 0 !important;
  }
}

As you can see in the screenshot below, the submenu is now scrollable.

Unfortunately, site optimization is beyond the scope of support but one thing that we would recommend is to completely disable css hero because it adds redundant and unnecessary css codes in the site. If you check the css dashboard, there are now 10,000 css rules, which contains empty declarations and repeated css. For more info about site optimization, please check the following articles.

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hi,

No problem. For some reason, we do see any stripes between the menu items. You can check the screenshot above to see how it looks on our end.

If you have more questions, please feel free to open another thread. We will close this thread for now.

Have a nice day.

Best regards,
Ismael