CSS dropdown menu not scrolling all the way to the bottom

Question

I have a drop down menu that will not let you scroll all the way to the bottom due to a top margin keeping the popup from appearing on the header. I have tried adding padding but it's not working. Here is the code. Any help is appreciated.

.shifter-enabled .shifter-navigation {
  width: 270px;
  height: 100%;
  position: fixed;
  padding-bottom: 20px;
  top: 30px;
  left: 0;
  z-index: 5;
  background: #ffffff;
  display: block;
  overflow-y: scroll;
  pointer-events: none;
  -webkit-transition: opacity 0.001s linear 0.2s, -webkit-transform 0.2s ease;
  transition: opacity 0.001s linear 0.2s, transform 0.2s ease;
}

Questions seeking code help must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example — Paulie_D
– Paulie_D, Commented Aug 17, 2015 at 14:14
@Paulie_D I cannot scroll all the way to the bottom of the menu leaving the last link in the menu unseen. When I set top to zero, then you can scroll down to see the last menu item. So I have concluded that the top margin being set at 30px is pushing the overflow past a scrollable point. — Tyler Nichol
– Tyler Nichol, Commented Aug 17, 2015 at 14:26
I created a quick fix. I added a blank <li> element to create a manual padding. Thanks anyway. — Tyler Nichol
– Tyler Nichol, Commented Aug 17, 2015 at 14:30

Pete · Accepted Answer · 2015-08-17 14:34:43Z

1

remove height:100% and add bottom:0px;:

.shifter-enabled .shifter-navigation {
  width: 270px;
  position: fixed;
  padding-bottom: 20px;
  top: 30px;
  bottom: 0px;
  left: 0;
  z-index: 5;
  background: #ffffff;
  display: block;
  overflow-y: scroll;
  pointer-events: none;
  -webkit-transition: opacity 0.001s linear 0.2s, -webkit-transform 0.2s ease;
  transition: opacity 0.001s linear 0.2s, transform 0.2s ease;
}

By setting the height to 100% - it will be as tall as the viewport, but as you move it down 30px, it will be 30px off the bottom of the screen. By setting the top and bottom and no height, it will always be stretched to meet the size of the viewport

edited Aug 17, 2015 at 14:34

answered Aug 17, 2015 at 14:29

Pete

58.8k31 gold badges132 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tyler Nichol Over a year ago

I tried yours so it was cleaner. Perfect fix! Thanks!

Pete Over a year ago

You're welcome, glad I could help! You should always fix problems caused by css with css - makes for more maintainable code in the future

Tyler Nichol · Accepted Answer · 2015-08-17 14:31:25Z

0

A quick fix is adding a blank li element to create manual padding.

answered Aug 17, 2015 at 14:31

Tyler Nichol

6752 gold badges7 silver badges28 bronze badges

Collectives™ on Stack Overflow

CSS dropdown menu not scrolling all the way to the bottom

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related