CODEWITHSUNDEEP
wordpress
Manas Mitra
Manas Mitra

Reputation: 23

Scrolling feature in wordpress drop down menu

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?

Upvotes: 0

Views: 10332

Answers (2)

Drake Alan Bliss
Drake Alan Bliss

Reputation: 1

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.

Upvotes: 0

Djave
Djave

Reputation: 9329

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

Upvotes: 4

Related Questions