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?
Edit: Solved! Can't believed I missed that one, was starting at the html for shy of an hour trying to spot a mistake
Cheers Guys!
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 >
<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 id="home">
</div>
<hr>
<div id="new">
</div>
<hr>
<div id="additionals">
</div>
<hr>
<div id="renovations">
</div>
<hr>
<div id="contact">
</div>
</body>
</html>
CodePudding user response:
Your text wasn't wrapped in the anchor tag. You have to put the </a>
tag right before the closing </li>
tag like so:
<header>
<h1>Original Tombstones</h1>
<ul >
<li><a href="#new">New Memorials</a></li>
<li><a href="#additionals">Additionals</a></li>
<li><a href="#renovations">Renovations</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</header>
CodePudding user response:
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>
CodePudding user response:
Try putting the text inside the <a>
tag i.e
instead of :
<li><a href="#renovations"></a>Renovations</li>
try
<li><a href="#renovations">Renovations</a></li>
CodePudding user response:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
font-family: "Nunito";
background: linear-gradient(#8fb0b7, #e8eff0);
}
nav {
width: 100%;
position: fixed;
top: 0;
z-index: 9999px;
background-color: #e6763c;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
text-align: center;
}
ul {
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
li {
display: inline-block;
padding: 10px;
margin: 0 0 0 2.5em;
background: #ddcfb199;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 100%;
}
/* On hover animations */
li:hover {
box-shadow: 0px 0px 7px 7px #3333;
transform: scale(1.02);
}
li a {
text-decoration: none;
color: #000;
}
/* Mobile */
@media (max-width: 900px) {
nav {
background-color: #e6763c;
padding-left: 0.2rem;
flex-direction: column;
justify-content: space-around;
}
li {
display: block;
margin: 1.2rem;
}
}
<header>
<nav>
<h1>Original Tombstones</h1>
<ul >
<li><a href="#new">New Memorials</a></li>
<li><a href="#additionals">Additionals</a></li>
<li><a href="#renovations">Renovations</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="home">
</div>
<hr>
<div id="new">
</div>
<hr>
<div id="additionals">
</div>
<hr>
<div id="renovations">
</div>
<hr>
<div id="contact">
</div>
CodePudding user response:
Your links are empty. The text is outside the closing anchor tag </a>
so they are acting as list items instead of links. Put the text inside the anchor tag.
<ul >
<li><a href="#new">New Memorials</a></li>
<li><a href="#additionals">Additionals</a></li>
<li><a href="#renovations">Renovations</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>