I'm currently facing an issue that I can't seem to resolve, and I suspect it might have something to do with the positioning. Despite my attempts to find a solution online, I still can't determine why this problem persists.
My objective is to place my header (name) in my fixed navigation bar. However, whenever I try to achieve this, the header ends up being positioned behind the grey background color... How can I bring the header to the front of the background? I want the header to remain fixed within the navigation bar. Thank you in advance for any assistance!
html {
margin: 0;
background: #ffffff;
}
body {
margin: 0;
background: #ffffff;
}
/*---font---*/
@font-face {
font-family: open-sans;
src: url('open-sans.regular.ttf');
}
@font-face {
font-family: Prata-Regular;
src: url('Prata-Regular.ttf');
}
@font-face {
font-family: Frontage-Outline;
src: url('Frontage-Outline.otf');
}
/*---nav bar---*/
h1 {
display: inline-block;
float: left;
position: fixed;
z-index: -1;
}
ul {
list-style-type: none;
background-color: #F5F5F5;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
display: inline-block;
}
li {
float: right;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: open-sans;
}
li a:hover:not(.active) {
color: #555555;
}
.active {
color: #000;
}<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav bar-->
<div class="navbar">
<div class="bar">
<h1>cindy le</h1>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
</div>
</body>
</html>