I have a sidebar fixed at 100% height. This sidebar is below the fixed caption, so the top is below the caption.
This causes the overflow scroll to not reach the last element or two:
Jsfiddle
Here is the HTML:
<div class="header"> <div class="header-inner"> <h1 class="header-image"><a href="/"><img src="/" id="logo" alt="Header Test"/></a></h1> <nav class="menu"> <ul class="nav-lvl-1"> <li><a href="/">Home</a></li> <li><a href="http://google.com/nav">Link1 </a></li> <li><a class="has-sub-menu" href="http://google.com/nav">Link2</a> <ul id="test" class="nav-lvl-2"> <li><a href="http://google.com/sub">Sublink1</a></li> <li><a href="http://google.com/sub">Sublink2</a></li> <li><a href="http://google.com/sub">Sublink3</a></li> <li><a href="http://google.com/sub">Sublink4</a></li> <li><a href="http://google.com/sub">Sublink5</a></li> <li><a href="http://google.com/sub">Sublink6</a></li> <li><a href="http://google.com/sub">Sublink7</a></li> <li><a href="http://google.com/sub">Sublink8</a></li> <li><a href="http://google.com/sub">Sublink9</a></li> <li><a href="http://google.com/sub">Sublink10</a></li> <li><a href="http://google.com/sub">Sublink11</a></li> <li><a href="http://google.com/sub">Sublink12</a></li> </ul> </li> <li><a href="http://google.com/nav">Link3</a></li> <li><a class="has-sub-menu" href="http://google.com/nav">Link4</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/nav">Sublink1</a></li> <li><a href="http://google.com/nav">Sublink2</a></li> <li><a href="http://google.com/nav">Sublink3</a></li> <li><a href="http://google.com/nav">Sublink4</a></li> <li><a href="http://google.com/nav">Sublink5</a></li> </ul> </li> <li><a class="has-sub-menu" href="http://google.com/nav">Link6</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/nav">Sublink1</a></li> <li><a href="http://google.com/nav">Sublink2</a></li> </ul> </li> </ul> </nav> </div> </div>
And CSS:
.header { position: fixed; top: 0; left: 0; width: 100%; background: #6ab014; z-index: 100001; height: 75px; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; } .header .header-image a { pointer-events: none; cursor: pointer; } .container { position: relative; margin-top: 75px; width: 100%; } .main { position: block; width: 90%; max-width: 80em; margin: 0 auto; padding: 0 1.875em; } .header nav { position: fixed; left: 0px; top: 75px; background: #87cc33; width: 330px; height: 100%; z-index: 1000; overflow:auto; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .header nav ul { padding: 0; margin: 0; list-style-type: none; } .menu.menu-open { left: 0px; } .menu .nav-lvl-2.sub-menu-open-mobile{ max-height: 1000px; display: block; opacity: 1; } .menu .nav-lvl-2 { background: #a5e25b; max-height: 0px; display: none; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .menu .nav-lvl-2 a { border-bottom: 1px solid #fff; } .has-sub-menu { pointer-events: none; cursor: pointer; } .menu li:hover { cursor: pointer; } .menu a{ display: block; color: #fff; font-size: 1.1em; font-weight: 300; border-bottom: 1px solid #a5e25b; padding: 1em; text-decoration: none; } a.has-sub-menu:not(.sub-menu-open-mobile):before { position: absolute; content: ""; left: 290px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #fff; margin-top: 7px; } a.has-sub-menu.sub-menu-open-mobile:before { position: absolute; content: ""; left: 290px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid #fff; margin-top: 7px; } a.has-sub-menu:hover:before, a.has-sub-menu:focus:before, a.has-sub-menu:active:before { border-color: transparent #730800; } a.has-sub-menu:hover:after, a.has-sub-menu:focus:after, a.has-sub-menu:active:after { border-color: #730800; }
Is there a way to solve this using CSS, and not JQuery / Javascript?
source share