So I've been tinkering with HTML and CSS for a little bit (please excuse my presentation) and I've been trying to get a fixed navbar working with inpage links that go the different sections within my one page website. I've knocked this up this morning and I can't for the life of me get the links to work.
I've had a google and there's a few similar posts saying that the z-index is the issue but I've had a play about with it and I still can't get them to work.
...anyone fancy shedding some light on it for me?
html {
}
body{
font-family: 'Nunito';
background: linear-gradient(#8FB0B7, #E8EFF0);
}
header {
background-color: #e6763c;
box-sizing: border-box;
padding: 0 2rem;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
li {
display: inline-block;
padding: 10px;
margin: 0 0 0 2.5em;
background: #DDCFB199;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 100vh;
}
/* On hover animations */
li:hover{
box-shadow: 0px 0px 7px 7px #3333;
transform: scale(1.02);
}
/* Mobile */
@media (max-width: 900px) {
header {
background-color: #e6763c;
box-sizing: border-box;
padding-left: 0.2rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: block;
margin: 1.2rem;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1>Original Tombstones</h1>
<ul class="navbar">
<li><a href="#new"></a>New Memorials</li>
<li><a href="#additionals"></a>Additionals</li>
<li><a href="#renovations"></a>Renovations</li>
<li><a href="#contact"></a>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
</div>
<hr>
<div class="container" id="new">
</div>
<hr>
<div class="container" id="additionals">
</div>
<hr>
<div class="container" id="renovations">
</div>
<hr>
<div class="container" id="contact">
</div>
</body>
</html>
Your innerHTML is empty inside your <a>
tags. This worked for me
Put this for your links instead:
<li><a href="#new">New Memorials</a></li>