0

I am creating a site with wordpress having six primary menu option and out of the six, two have 26 sub options under them. As the number of options in the drop downs are more than what my PC screen can accommodate, a few options at the bottom are cutoff. I also could not find any option to create the scrolling effect in the over-sized menu. I tried to search for the way out, but couldn't find one suitable in wordpress or stackoverflow. Is their any way out of this problem?

Manas Mitra
  • 23
  • 1
  • 8
  • You should include what you have already tried so that people are able to help you or at least view what you mean about the menu overflowing so far. I could offer an answer but I may be totally wrong as its hard to know exactly how the issue you are facing arises – Djave Sep 14 '15 at 11:33
  • I found a possible looking solution from _css-tricks.com_ with a heading _Solution For Very Long Dropdown Menus_. The post is of 2009 and there is no one to explain it's working. I just cannot blindly put a piece of code in my page without knowing how it is working. If you ask, I can post the code here, so that you may help me understand. – Manas Mitra Sep 14 '15 at 12:03

2 Answers2

4

The easiest way to fix this would be something like the below:

ul ul{
    max-height:200px;
    overflow-y:scroll;
}

So, a list element inside a list element (the sub menu of your menu) has a maximum height of 200px. If it is over this, a scroll bar will let the user scroll down.

Demo

Djave
  • 8,595
  • 8
  • 70
  • 124
  • It is the desired effect. it used an un-ordered list. Does wordpress menu system use un-ordered list? I do not have much idea about the inner working of wordpress. I'm using a child theme. So, where should I put the code - It may seem like a childish query, but I need to know. Thanks. – Manas Mitra Sep 14 '15 at 12:16
  • I just used your code and it works great. Thanks! One problem I have is that I have a *second* sub menu *within* my first sub menu (so a drop down from one of the items in the first drop down). Previous to implementing the code, the second sub menu opened on the side of the first sub menu. Now when I hover over the parent in the first sub menu, all I get is a scroll bar to scroll sideways to the second sub menu. What css can I use to make my second sub menu visible again? – Thomas Reinstate Monica Myron Feb 12 '19 at 22:03
  • @ThomasMyron That's pretty tricky, unfortunately! `overflow-x` and `overflow-y` play very strangely with each other... more on it here: https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue – Djave Feb 13 '19 at 16:46
0

First you need to assign a class name to each of your sub menus. Go to "Appearance-Menus". Pop open the "Screen Options" at the top of the screen. Check the box for "CSS Classes". Then go to each of the sub menu names in your menu, pop the menu open and enter "SubMenu1" into the "CSS Classes (optional)" field for the first menu to have scrolling and "SubMenu2" for the second menu you want scrolling on. You will use these class names in the next steps.

No go to the "Appearance-Customize-Additional CSS" option and add this css.

.nav li ul { width: 290px; }

#top-menu li li a { width: 250px; }

.SubMenu1 ul {
      height: 400px;
      overflow: scroll;
}

.SubMenu2 ul {
      height: 400px;
      overflow: scroll;
}

Depending on the widths you need, you can adjust the width values.

Drake Alan Bliss
  • 1
  • 1