Sydney submenu items are partly invisible on web version

Hello

I created menu with several levels of sub-menu.

http://sports-psychology.pro/all-sports-psychology/nba-basketball-psychology/

On last level sub-menu I created 15 items, but on web version - I could reach/open only 11-12 out of 15 items (3 items are not available to reach).

In mobile / tablet - all items are visible, but in web version they are partly invisible (too long list of items - need may be scroll, roller).

Please help to fix this issue. Thanks in advance.

Hello there,

Sorry for inconvenience.

Hello there,

To fix it, please try to do the following steps:

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following code into the “Scripts in header:” box


<style type="text/css">
.scrollable-mobile-menu{
  overflow-y: scroll;
}
</style>

  1. Paste the following code into the “Scripts in footer:” box

<script type="text/javascript">

  jQuery(function($) {

    $(window).on('load resize', function() {
    
      var hW          = $(window).height();
      var hNavbar     = $('.site-header').outerHeight();
      var visHeight   = hW-hNavbar;
      var menuItems = $('.menu > li').size();
      var mMenuHeight = 45*menuItems;

      if( mMenuHeight > visHeight ){
        $('.mainnav').height(visHeight).addClass('scrollable-mobile-menu');
      }

    });
    
  });

</script>

  1. Save settings

Now the mobile menu becomes scrollable vertically.

You would clear your web browser’s cache/history before reloading your site to see the code takes affect.

Regards,
Kharis

Hello Kharis.

Thanks for your reply :slight_smile: but nothing is changed really.

http://sports-psychology.pro/all-sports-psychology/nba-basketball-psychology/

Please go (in your browser on your laptop) to ALL SPORTS -->NBA–>Eastern Conference–>(then you will see list of teams - there should be 15 of them - but my browser view do not allow me to reach/click/look at last 3-4 teams in the list. In my browser I can not click on Philadelphia 76ers, Toronto Raptors, Washington Wizards). I can reach/go to the bottom of teams list.

Mobile version worked fine for me. No needed any help with mobile functionality. In mobile version I could reach all the items of this submenu.

Thanks in advance.

Hello there,

Sorry for not getting your point clearly. Please undo the instruction I suggested.

As the solution, please apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.

#mainnav .sub-menu li a {
  padding: 0 5px;
  line-height: 15px;
}

Let me know how it works for you.

Regards,
Kharis

Thanks

It does not work :slight_smile: Please see visual explanation - http://s020.radikal.ru/i704/1611/a0/5b3fd2b4b2fc.png

Hello there,

If the custom CSS code I suggested properly applied, you will get this result.

Cloudup

It was intended to reduce the sub menu height. So that the longer one will be fully visible on the screen. This is the most feasible approach rather that adding a scroll functionality.

Please try applying that code once again. Install and activate the Simple Custom CSS plugin and put the code into the provided box. Be sure that a group of CSS code that resides there is error free. You can check it using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

Hello Kharis,

Now it works! I had another CSS plugin - TJ Custom CSS, where code provided by you did not work properly

Thanks a lot! Appreciate your time.

Regards, Iurii!

Hello Iurii,

Thank you for updating me. I am glad to know you figured it out.

Please feel free to open a new topic if you need anything else.

Regards,
Kharis