I am currently working on developing a sticky navigation bar that remains in place when scrolling down. However, I encountered an issue where using position: fixed; caused the text to overlap. Unfortunately, I am unable to use jQuery as my professor has advised against it.
<html>
<head> <title> My Portfolio </title>
<link rel="stylesheet" type = "text/css"
href="stylesheet.css"> </head>
<body>
<ul>
<a href="Index.html"> Home </a>
<a href="About.html" > ABOUT </a >
<a href="Projects.html" >PROJECTS </a >
<a href="Resume.html" >RESUME </a >
<a href="Gallery.html" > GALLERY </a >
<b> </b>
</body>
</html>
CSS
body{
background-position:fixed;
background-repeat:repeat-x;
background-color:white;
font-family:Arial;
font-size:20px;
}
a{
color:#1b1b1b;
TEXT-DECORATION: NONE;
position:fixed;
z-index:2;
}
b{
top:0;
height:30px;
width: 100%;
background:white;
text-align:left;
position:fixed;
z-index:1;
}