-3

So, I have a navbar collapse vertical on the left part of my page, when I click the nav-pills the menu content shows just under them as it should, however, there's too much info and it's going off screen, I have a pill with like 13 elements on it and it's on the very bottom of the page, almost all of it goes off screen, what could I do to make it go upwards or make the rest of the content fixed to the bottom of the container and the opened pill have a scrollbar so I could navigate through them.

The navbar is kinda like this: http://www.bootply.com/0TBt8gDdsr

i need the other pills to NOT go off screen, and the menu inside any of them to have at least a scroll bar or kinda of a little list that I could navigate through without taking too much space of the page, does anyone know how could I do that ? Thanks.

P.S:Sorry for my bad english.

GaoVN
  • 33
  • 8
  • You could reduce padding, and why is the nav link height 55px?http://www.bootply.com/WFi3bCJ6IT – Carol Skelly Jul 07 '16 at 13:24
  • Because it looks better in the full page and changing the padding on my actual code doesn't change anything... – GaoVN Jul 07 '16 at 13:46

1 Answers1

2

You're going to want some additional tinkering to make the transition smoother, but to address only the issue of the large menu, apply the following CSS:

#cadastros-menu {
    height: 200px;
    overflow-y: auto;
}

This will cause your first menu (the one with 10+ links) to have a fixed height and a scrollbar. Unfortunately Bootstrap's JS does fire to have it expand down all the way and then it jumps back up to the fixed height.

In addition, you'll need to adjust your .nav. You'll want it to have a specified width, and you'll want to use display: block in lieu of table-cell so that you have full-width links.

The fixed width on .nav will help keep your dropdown menu's scrollbar from appearing on the far right of the screen. The full-width links is just good UI.

Robert
  • 6,881
  • 1
  • 21
  • 26
  • Okay, the css works perfectly, but i didn't get why to use the display:block instead of table-cell, when i change it the text go up, it looks weird here, also, do you know any way to make the menus open upwards ? Thanks – GaoVN Jul 07 '16 at 13:41
  • `block` will make your primary links take up 100% of the width. Right now they take up only enough space as needed by the link title and relevant padding. You can try using `. dropup` to see if that works; it is a valid Bootstrap class but I don't know if it will function in this use case. – Robert Jul 07 '16 at 13:46