Drop down menus display different number of options on different browsers

alabamatick · Member · Feb 25, 2014 at 12:58 am
Copy link

Add topic to favorites
I am using the “twenty-fourteen” theme to build a blog/website for a non-profit nature center. On the primary menu at the top of the website, one of the items, Nature Bytes, has 17 items (pages) listed, ranging from Angler Education and Archeology to Water and Weather.

On my browser (Linux/Firefox), I can see the full list drop down when I select the menu topic. Others members of the nature center see a subset based on their environment, Windows vs Mac, Firefox vs. Explorer, etc. Some only see the first 8-10 items.

Is it possible to add a scrolling mechanism to the menu navigation? This gets worse when moving from monitor to tablet. I’ve tried a number the suggestions in the forum, such as changing the spacing, but none of them seem to address this issue.

I realize 17 items in a menu is a bit extreme but even so that does not address the concern of why different browsers show different number of options. And if I can’t add a scrolling mechanism, what is the max number of menu items I can have in a drop down menu?

As a stop/gap measure, I created a main page with links to the individual pages, but that’s a bit of a kludge.

Website: http://uhlnc.wordpress.com
Mapped to: http://uhlnc.org

Appreciate any suggestions. Thanks.

The blog I need help with is: (visible only to logged in users)
hfzrhmn · Member · Feb 25, 2014 at 1:09 am
Copy link
Hello,

It seems to me that the issue is not in the browsers, but in the screen height. I’m on Chrome Mac and if I resize the browser height to something small, I can only see the first few menu items as well.

I’m not yet sure what’s the fix here, but I think that’s worth to mention.
hfzrhmn · Member · Feb 25, 2014 at 1:14 am
Copy link
Update, you can actually add a scrolling mechanism. Try this:
```
@media screen and (min-width: 783px) {
    ul.sub-menu {
        max-height: 400px;
    	overflow-y: scroll;
    }
}
```
(Tweak the max-height number as you wish)
alabamatick · Member · Feb 25, 2014 at 1:16 am
Copy link
Yes, that is exactly the sort of thing our members are seeing. Can you access the other items in the menu list? Some of our members cannot, even with the browser fully max’d out. Hence the hope that some one can suggest a scroll option or some other clever invention.
alabamatick · Member · Feb 25, 2014 at 1:30 am
Copy link
I plugged that code into the CSS edit window but it did not fix the problem. Interestingly when I went back to look at the CSS, it had deleted the lines:

ul.sub-menu {
max-height: 400 px;

Any other thoughts?
designsimply · Member · Mar 3, 2014 at 11:06 pm
Copy link
I tested adding hfzrhmn’s example, and saving it worked on my test blog and it kept all the lines in tact. Would you mind please saving it again and letting me know if you’re still having trouble?

Another update you might consider is reducing the padding above and below each submenu link:
```
.primary-navigation ul ul a {
	padding: 8px 12px;
}
```
I realize 17 items in a menu is a bit extreme but even so that does not address the concern of why different browsers show different number of options.

I can think of a couple reasons: different zoom settings, different viewport sizes.

However, I also checked http://uhlnc.org/ on various browsers myself and the submenu looked as I would expect it. In general, the submenus really aren’t designed to scroll but you should be able to get them to do it with the modification hfzrhmn provided. Do give that example another try and let us know how it goes.

No items found.