I am facing an issue with my navbar where the <a> tag is not updating the URL to the new address. I have tried giving the <a> tag a z-index 999;, but it still doesn't work.
This is a one-page site and I use # to make the browser jump to the correct position.
I do not have a .htaccess file, the code provided is all that I have.
HTML
<nav class="navbar col-md-12">
<div class="container">
<div class="logo">
<div class="fa-microphone"></div><label>Bit-meeting</label>
</div>
<ul class="hidden-xs desktop-menu">
<li>
<a href="#Forside">Forside</a>
</li>
<li>
<a href="#Om">Om</a>
</li>
<li>
<a href="#Plan">Plan</a>
</li>
<li>
<a href="#Talere">Talere</a>
</li>
<li>
<a href="#Billetter">Billetter</a>
</li>
<li>
<a href="#Blog">blog</a>
</li>
<li>
<a class="btn btn-border" href="#Kontakt">Kontakt</a>
</li>
</ul>
</div>
</nav>
SCSS
.navbar {
height: $navbar;
width: 100%;
position: fixed;
border-bottom: 2px solid $red;
z-index: 19;
background-color: white;
margin: 0px;
padding: 0px 15px;
.logo {
margin-left: 15px;
display: flex;
line-height: $navbar;
text-indent: 5px;
font-size: 1.2rem;
font-weight: bold;
text-transform: capitalize;
position: absolute;
div {
text-indent: 0px;
color: black;
font-family: FontAwesome;
background-color: #ED1C24;
width: 60px;
height: 60px;
font-size: 2rem;
text-align: center;
line-height: 60px;
border-radius: 50%;
margin-top: 10px;
}
}
.desktop-menu {
float: right;
li {
list-style-type: none;
display: inline-flex;
a {
padding: 0px 10px;
line-height: $navbar;
text-decoration: none;
color: black;
height: $navbar;
cursor: pointer;
display: block;
&:hover {
background-color: $red;
color: white;
}
}
.btn {
line-height: 38px;
height: 40px;
}
}
}
}
UPDATE
The <a> tag does not work at all, even outside of the nav element.
(No, there are no additional styles for ul, li or a beyond what is visible)