Can anyone help me figure out how to add a scroll bar specifically for the left side navigation menu? I've tried adding overflow-y: scroll; in different places, but it hasn't worked so far. I'm still learning web design and have been piecing together tips from guides and templates. Any advice would be greatly appreciated. Thank you!
<ul class="navigation">
<li class="nav-item"><input type="type" placeholder="Search for a country..." name="search" id="search"> </form> </li>
<li class="nav-item"><a href="#">Home</a></li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger"/>
<label for="nav-trigger"></label>
<div class="site-wrap">
Below is some of my CSS:
.navigation {
position: fixed;
background-color: rgb(230, 239, 252);
text-align: left;
list-style: none;
width: 100%;
height: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
border-top: 1px solid #111;
border-bottom: 1px solid #000;
font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(216, 214, 214, 0) 0%,rgba(230, 229, 229, 0.65) 100%);
color: rgb(8, 8, 8);
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #333;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(12, 52, 126, 0.65) 100%);
}
.site-wrap {
min-width: 100%;
min-height: 100%;
background-color: rgb(230, 239, 252);
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
padding: 4em;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
position: fixed;
top: 15px;
left: 15px;
z-index: 2;
width: 30px;
height: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
}
body {
overflow-x: hidden;
}
Let me know if you need more code snippets.