Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear.
For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV
Any assistance would be greatly appreciated!
This is the CSS code:
body {font-family:sans-serif;}
.socialmedia {margin-left: 80%;}
.socialmedia li {
display: inline;
border:none !important;}
/*Fixed Nav*/
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding:30px 0 5px 0;
z-index: 100;
color: white;
background-color: #211f1f;
font-family: sans-serif;}
.inner {
margin-left: 19%;
float: left;
text-align: justify;
font-size: 120%;}
.inner a {
padding: 0px 63px;}
#nav li {
display: inline;
border-right: 1px solid grey;}
#nav a {
display: inline-block;
color: #FFF;
text-decoration: none;}
/*Nav Transitions*/
.noNav {display: hidden;}
#content {
width: 800px;
height: 700px;
margin-top:100px;
margin-left:auto;
margin-right:auto;}