Develop Reference

Sticky Navigation bar <a> tags

I'm very new to html/css/JS and I've made a sticky Navigation bar for my page but I'm having trouble with where the clickable area is for my tags on the navbar. I've some how gotten the clickable area to the left of my text not the text itself.
If someone could shed some light on what I've done wrong it would be a massive help.
Thanks!
<div class="page-navigation">
<nav id="navbar">
<div class="social">
<img src="Images/facebook-logo.png" alt="facebook link" />
<img src="Images/twitter-logo.png" alt="twitter link" />
<img src="Images/linkedin-logo.png" alt="linkedin" />
</div>
<img
src="Images/Logo-ADC%20Systems.png"
class="logo"
alt="Logo ADC Systems"
/>
<ul id="menu">
<li><a class="nav__links" href="index.html"></a>Home</li>
<li><a class="nav__links" href="About%20us.html"></a>About Us</li>
<li><a class="nav__links" href="Services.html"></a>Services</li>
<li><a class="nav__links" href="Contact%20us.html"></a>Contact Us</li>
</ul>
</nav>
.home-navigation{
width: 100vw;
height: 100vh;
background-image: url("Images/Home-Background.jpg");
background-size: cover;
}
.page-navigation{
width: 100vw;
height: 80vh;
background-color: #2D3142;
background-size: cover;
}
.social{
float: right;
padding-right: 0.8rem
}
.social img{
width: 40px
}
nav{
position: relative;
z-index: 1;
Width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box
}
#navbar a {
float: left;
color:#2D3142;
text-align: center;
padding: 14px;
text-decoration: none;
}
.logo{
width: 300px;
margin: 5px 0;
}
nav ul{
background: #FFFFFF;
width: 100%;
margin-top: 5px;
}
nav ul li{
position: relative;
display: inline-block;
list-style: none;
margin: 20px 30px;
color: #EF8354;
cursor: pointer;
}
#navbar ul li:hover{
color:#2D3142;
transition: 0.3s ease-out;
}
nav.sticky{
position: sticky;
top: 0;
left: 0;
padding: 10px 8%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
transition: padding 1s;
}
nav.sticky ul{
width: auto;
}

See
<li><a class="nav__links" href="index.html"></a>Home</li>
They should be the following, note where the Home is, inside the link not outside
<li><a class="nav__links" href="index.html">Home</a></li>

list has 8 items but the the last 4 items moves out from the blue background in testimonials-section

As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>

By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);

Why is my dropdown div in my fixed nav bar not showing under each parent link?

I am trying to get my nav bar dropdown list to work using JavaScript.
I got everything working except for when I hover over the rest of the items, the dropdown only shows up under the first link? I tried working around it and putting it in lists but I'd rather not and when I do I just then end up ruining the whole nav bar.
Here's what I mean:
style.css
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#title {
background-color:white;
float: left;
padding-left: 2%;
position: absolute;
padding-top: 1.5%;
}
#nav {
background-color: white;
height: 79px;
min-width: 600px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
}
#nav a {
text-decoration: none;
}
#nav a:link {
color: grey;
}
#nav a:hover {
background-color: lightgrey;
}
#nav a:visited {
color: maroon;
}
#nav a:active {
color: maroon;
}
#navLink {
padding-top: 2.5%;
padding-right: 2%;
letter-spacing: 3px;
float: right;
}
#navLink div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: whitesmoke;
}
#navLink div a {
position: relative;
display: block;
margin: 0;
width: auto;
padding: 5px 10px;
text-align: left;
}
.container {
width: 100%;
}
#content {
padding-top: 10%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom:0px;
left:0xp;
width:100%;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.stopFloat {
clear:both;
left: 0px;
right: 0px;
bottom: 0px;
}
Here's my navbar code snippet:
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<a href="index.html"
onmouseover="dropDown('dd1')"
onmouseout="closeddtime()">Home</a>
<div id="dd1"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
<a href="02_advLayout/index.html"
onmouseover="dropDown('dd2')"
onmouseout="closeddtime()">Content</a>
<div id="dd2"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
About Us
Coffee
Shop
Class
</div>
<a href="05_js_fw/index.html"
onmouseover="dropDown('dd3')"
onmouseout="closeddtime()">JS Framework</a>
<div id="dd3"
onmouseover="cancelddclosetime()"
onmouseout="closeddtime()">
Video
Who
What
</div>
Labs
</div>
</div>

The issue is with your DOM structure. In your code, you have to give separate left offsets for each drop-down to display it properly under the parent. But in case you are changing the navigation later, you have to adjust the css also to maintain alignment.
So i feel it is better to restructure your code. May be you can refer the below navigation. It is a simple css navigation with out any js.
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
position: relative;
display: inline;
margin: 0 20px;
}
li ul{
position: absolute;
width: 150px;
left: 0;
top: 100%;
display: none;
}
li:hover ul{
display: block;
}
li ul li{
display: block;
margin: 10px 0;
}
<div id="nav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div id="navLink">
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>Sub menu</li>
<li>Sub menu
</li>
<li>Sub menu</li>
<li>Menu</li>
</ul>
</li>
<li>Sub menu</li>
<li>Sub menu</li>
</ul>
</div>
</div>

DIV Sections Overlapping One Another

I have made a sidebar which is positioned as fixed to the left-hand side of the screen. Then where the issue comes in is the 'first' section of context is fine just when I try to add the second section of context, it basically sits its exactly on top of the first section instead of going under it. I have tried different positioning but it's always either on top of it or to the left of the screen ignoring the sidebar. So my question is, how do I get the second section to continue under the first section and the third section then of course to follow on the same way. Thanks in advance.
body{
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link{
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext{
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar{
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
#sectionone {
position: fixed;
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header{
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo{
float: ;
width: 80%;
top: 0;
right: 0;
}
#containertwo{
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title"/>
</form>
</div>
<ul>
<li>
<a class="link">
Home
</a>
</li>
<li>
<a class="link">
Categories
</a>
</li>
<li>
<a class="link">
Bestsellers
</a>
</li>
<li>
<a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</div>
</body>
</html>
Image of the problem - http://i.imgur.com/g9ur5eS.png

Based upon the answer to my comment, you don't want sectionone to have position:fixed;. I have put /* ### */ next to CSS I have added, and commented out anything that needs removing.
Basically I've added some resetting rules to html/body and then added a 20% left margin to the wrapper. The other elements just flow next to it naturally.
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
float:;
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br />Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title" />
</form>
</div>
<ul>
<li> <a class="link">
Home
</a>
</li>
<li> <a class="link">
Categories
</a>
</li>
<li> <a class="link">
Bestsellers
</a>
</li>
<li> <a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</div>

If you contain the <div id="sectionone"> and <div id="sectiontwo"> in a wrapping tag and apply the nav width as padding to this wrapper, then remove the fixed position from those two divs you should get what you're looking for.
http://jsfiddle.net/vf00h0zq/
body{
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li{
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link{
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
#welcometext{
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar{
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar input{
max-width: 95%;
}
.content {
padding-left: 20%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header{
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0,0,0,0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#containertwo{
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="...Search Book Title" />
</form>
</div>
<ul>
<li> <a class="link">
Home
</a>
</li>
<li> <a class="link">
Categories
</a>
</li>
<li> <a class="link">
Bestsellers
</a>
</li>
<li> <a class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<section class="content">
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2>Best Selling Books Right Now</h2>
</div>
</div>
</section>
</div>

Slide out vertical navigation

I am trying to put the finishing touches on this slide out navigation but am running into one final problem.
You can see it here: http://jsfiddle.net/93chsw11/1/
Although you should know, it's missing Glyphicons so it doesn't look as good on there, the left of each link has an icon and is clickable to open that section of links. You can still click the right side of the empty space, though.
Now, the problem is that when the navigation is open the content becomes horizontally scrollable and if you scroll to the right it goes on top of the nav bar.
I would like it to either scroll with the navigation, keeping them side by side, or somehow scroll underneath the nav bar. I've looked all around for solutions but nothing fixes this problem without causing another problem.
I'm open to other suggestions of maybe different routes to take, maybe with margins instead of left position or something along those lines? I just want it to look how it does now, with the Glyphicons to the left of the section names, and when the nav is collapsed to show the icons.
Thanks in advance for any and all help :)
CSS for navigation positioning:
#sidebar {
position: fixed;
left: 0;
width: 200px;
height: 100%;
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
CSS for content positioning:
#newcontent {
position: absolute;
background-color: #fff;
left: 50px;
top: 50px;
width: 96%;
padding-left: 15px;
padding-top: 5px;
}
jQuery functions for opening/closing:
$("#hide-nav").click(function() {
$("#newcontent").animate({'left':"50px"}, 250);
$(".sublinks").hide(250);
});
$(".openall").click(function(){
$("#newcontent").animate({"left": "205px"}, 250);
$(".sublinks").show(250);
});
$(".hideall").click(function(){
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$("#newcontent").animate({"left": "205px"}, 250);
//$("#newcontent").animate({'marginLeft':"205px"}, 250);
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});

You can achieve what you're trying to do using z-index over here coupled with a little of jQuery. You can set the z-index of your sidebar to a high value such as 9999 when the openall button is cicked and you can set the z-index back to 0 when the sidebar is hidden. These are the two jQuery functions that I've modified a little in your code:
$("#hide-nav").click(function() {
$("#newcontent").animate({'left':"30px"}, 250);
$(".sublinks").hide(250);
$("#sidebar").css("z-index","0");
});
$(".openall").click(function(){
$("#newcontent").animate({"left": "205px"}, 250);
$(".sublinks").show(250);
$("#sidebar").animate({"z-index": "99999"}, 250);
});
$("#hide-nav").click(function() {
$("#newcontent").animate({
'left': "30px"
}, 250);
$(".sublinks").hide(250);
$("#sidebar").css("z-index", "0");
});
$(".openall").click(function() {
$("#newcontent").animate({
"left": "205px"
}, 250);
$(".sublinks").show(250);
$("#sidebar").animate({"z-index": "99999"}, 250);
});
$(".hideall").click(function() {
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$("#newcontent").animate({
"left": "205px"
}, 250);
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});
#sidebar {
position: fixed;
left: 0;
width: 200px;
height: 100%;
/*margin-left: -150px;*/
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
#sidebar::-webkit-scrollbar {
display: none;
}
#open-close {
cursor: pointer;
text-align: left;
margin-right: 10px;
margin-top: -10px;
margin-bottom: 15px;
font-size: 0.8em;
}
#open-close span {
padding: 10px;
margin-top: 5px;
}
#hide-nav {
cursor: pointer;
padding: 5px;
font-size: 0.7em;
font-weight: 600;
margin-top: -40px;
margin-left: -27px;
margin-right: 10px;
float: right;
}
#nav li {
list-style-type: none;
}
.navBG {
padding-right: 20px;
border-top: 1px solid #6c8ca6;
border-bottom: 1px solid #6c8ca6;
margin-bottom: -1px;
}
.navLink {
display: block;
width: 100%;
color: #d5dee5;
padding: 10px;
margin-left: 20px;
font-weight: 550;
text-decoration: none;
}
.navLink:hover {
color: #fff;
}
.navGlyph {
margin-right: 20px;
margin-left: 7px;
float: left;
}
.sublinks {
display: block;
width: 100%;
font-size: 0.8em;
margin-top: 5px;
display: none;
color: #c0cdd9;
background-color: #285174;
}
.sublinks li {
cursor: pointer;
border-left: 1px solid #6c8ca6;
}
.sublinks li:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.sublinks li a {
display: block;
text-decoration: none;
color: #c0cdd9;
padding: 5px;
padding-left: 0;
margin-right: 10px;
}
.sublinks li a:hover {
color: #fff;
font-weight: 500;
}
.sublinks-active {
display: block;
}
#newcontent {
position: absolute;
background-color: #fff;
left: 30px;
height: 100%;
width: 96%;
padding-left: 15px;
padding-top: 5px;
}
#newContent::-webkit-scrollbar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<nav id="nav">
<li id="open-close">
<span class="openall">+</span>
<span class="hideall">-</span>
</li>
<span id="hide-nav">Close</span>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
General Info
</a>
<ul class="sublinks">
<li>– Employee Directory</li>
<li>– Documents</li>
<li>– FTP</li>
<li>– CNC Bulletin Board</li>
<li>– Manage</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Job Info
</a>
<ul class="sublinks">
<li>– Job List</li>
<li>– Files Required</li>
<li>– Incoming Data List</li>
<li>– Signoffs</li>
<li>– Leader List</li>
<li>– Milestone/Timelines</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
QIR Info
</a>
<ul class="sublinks">
<li>– Open QIRs</li>
<li>– Search QIRs</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Reports
</a>
<ul class="sublinks">
<li>– Tryout Reports</li>
<li>– R&D Reports</li>
<li>– Tech. Advancements</li>
<li>– Budget Reports</li>
<li>– R&D Job Summary</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
NEW
</a>
<ul class="sublinks">
<li>– New Job</li>
<li>– New Incoming</li>
<li>– New Quote</li>
<li>– New Program</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="newcontent">
CONTENT HERE
</div>
jsFiddle Demo.
You can see in the above example that once the sidebar is open, you can scroll horizontally and sidebar always stays on the top and the content scrolls underneath it.

If you don't mind losing the "fixed" nature of the sidebar, you can set the sidebar and content divs to inline-block, then animate the width of the sidebar when closing/opening.
Fiddle example: http://jsfiddle.net/93chsw11/14/
Here's what that would look like CSS wise:
#sidebar {
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
/*margin-left: -150px;*/
color: #F0F0F0;
background-color: #2D5B81;
padding-top: 40px;
overflow: auto;
}
#sidebar::-webkit-scrollbar {
display: none;
}
#open-close {
cursor: pointer;
text-align: left;
margin-right: 10px;
margin-top: -10px;
margin-bottom: 15px;
font-size: 0.8em;
}
#open-close span {
padding: 10px;
margin-top: 5px;
}
#hide-nav {
cursor: pointer;
padding: 5px;
font-size: 0.7em;
font-weight: 600;
margin-top: -40px;
margin-left: -27px;
margin-right: 10px;
float: right;
}
#nav li {
list-style-type: none;
}
.navBG {
padding-right: 20px;
border-top: 1px solid #6c8ca6;
border-bottom: 1px solid #6c8ca6;
margin-bottom: -1px;
}
.navLink {
display: block;
width: 100%;
color: #d5dee5;
padding: 10px;
margin-left: 20px;
font-weight: 550;
text-decoration: none;
}
.navLink:hover {
color: #fff;
}
.navGlyph {
margin-right: 20px;
margin-left: 7px;
float: left;
}
.sublinks {
display: block;
width: 100%;
font-size: 0.8em;
margin-top: 5px;
display: none;
color: #c0cdd9;
background-color: #285174;
}
.sublinks li {
cursor: pointer;
border-left: 1px solid #6c8ca6;
}
.sublinks li:hover {
background-color: rgba(255,255,255,0.05);
}
.sublinks li a {
display: block;
text-decoration: none;
color: #c0cdd9;
padding: 5px;
padding-left: 0;
margin-right: 10px;
}
.sublinks li a:hover {
color: #fff;
font-weight: 500;
}
.sublinks-active {
display: block;
}
#newcontent {
background-color: #fff;
height: 100%;
padding-left: 15px;
padding-top: 5px;
display: inline-block;
vertical-align: top;
}
#newContent::-webkit-scrollbar {
display: none;
}
And the jQuery:
$("#hide-nav").click(function() {
$(this).add(".hideall").hide();
$("#sidebar").animate({width: "30px"},250);
$(".sublinks").hide(250);
});
$(".openall").click(function(){
$("#hide-nav").add(".hideall").show();
$("#sidebar").animate({width: "200px"},250);
$(".sublinks").show(250);
});
$(".hideall").click(function(){
$(".sublinks").hide(250);
});
$(".navLink").click(function() {
$(this).parent().children(".sublinks").slideToggle(250, function() {
$(this).parent().children(".sublinks").toggleClass('sublinks-active');
});
});