Nav bar wont scroll

[johannesmoolman]

– Hi guys , i am struggling with the following CSS. i have a sidebar which is working fine,if i scroll down on my page it stays there and does not move which i want, now my NAV bar ontop wont stay put. when i scroll down it does not stay put.

any help appreciated

* {
	margin:0px;
	padding:0px;
	font-family:sans-serif;
}
#sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#sidebar {
	position:fixed;
	width: 200px;
	height:100%;
	background: #151719;
	left: 0px;
	transition: all 500ms linear;
}
#sidebar.active {
	left:-200px;
}
#sidebar ul li {
	list-style: none;
	position: relative;
	padding :15px;
	width:170px;
	border-top: 1px solid rgba(100,100,100,0.3);
}
#sidebar .toggle-btn {
	position: absolute;
	left:210px;
	top:0px;
}
#sidebar .toggle-btn span {
	position:relative;
	display: block;
	width: 30px;
	height: 5px;
	background: #151719;
	margin: 5px 0px;
}
#sidebar ul ul {
	transition: all 0.3s;
	position: absolute;
	background: #151719;
	opacity: 0;
	visibility: hidden;
 height 100%;
	left:100%;
	top:-2%;
}
#sidebar ul li:hover >ul {
	opacity: 1;
	visibility: visible;
	background-color: black;
}
#sidebar ul li a {
	color:white;
	padding:0px;
	margin: 0 0;
	text-decoration: none;
}
span {
	margin-right:15px;
}
#sidebar ul li:hover {
	background-color: grey;
}
.container {
 width 80%  margin :0 auto;
}
header {
	background: #55d6aa;
}
header::after {
 	content:'';
	display: table;
	clear:both;
}
nav {
	margin-left: 20%;
	width:100%;
	z-index: -1;
}
nav ul {
	margin:0;
	padding: 0;
	list-style: none;
}
nav li {
	display: inline-block;
	margin:  20px;
	padding-top:10px;
	position: relative;
}
nav a {
	color: #444;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 800;
}
nav a:hover {
	color:white;
}
nav a::before {
	content: '';
	display: block;
	height:5px;
	width: 0%;
	background-color: #444;
	position: absolute;
	top:0;
	transition: all ease-in-out 400ms;
}
nav a:hover::before {
	width: 100%;
}

[johannesmoolman]

// Here is the HTML piece of code

    <div class ="container">
    <header>
    <nav >
        
        <ul>
            <li><a href ="">Home</a></li>
             <li><a href ="">Data</a></li>
             <li><a href ="">Reports</a></li>
             <li><a href ="">Financial</a></li>
             <li><a href ="">Boardrooms</a></li>
       
        </ul>
        
        </nav>
    
        </header>
    </div>

[Erik_J]

@johannesmoolman

now my NAV bar ontop wont stay put. when i scroll down it does not stay put.

Do you want that to have fixed position too? If so it seems to only lack the position declaration.

[PaulOB]

As Erik said if you want a fixed positioned header then you need to add the following code:

header {
	background: #55d6aa;
	position:fixed;
	top:0;
	left:0;
	right:0;
}

Note that you have a large horizontal scrollbar because of the following rule.

nav {
	margin-left: 20%;
	width:100%;
	z-index: -1;
}

margin-left:10% and width 100% make the element 120% wide! 120% will never fit in any container and cannot be used.

I assume you wanted the element 80% wide and in that case just use margin:auto and the width.

e.g.

nav {
	margin:auto;
	width:80%;
}

Of course you may have been trying to do something else.

Note that fixed positioned elements need a lot of maintenance because you always have to cater for the content being obscured or overlapped by the fixed elements. Use them carefully, sparingly and wisely and control your content in their proximity.

Lastly there are few typos in your css so run the code through the validator to catch a couple of typos

[johannesmoolman]

Thanks all for the help…

Much appreciated