I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click and open it in a new tab, but it doesn't work when I click on it directly.
Strangely, removing the <li></li> tags around the problematic link seems to make it work. Do you have any suggestions on how to fix this?
<div class="navmenu">
<?php if (is_front_page()) { ?>
<ul class="pull-left">
<li><a href="#app">app</a></li>
<li><a href="#why">why</a></li>
<li><a href="#habits">habits</a></li>
<li><a href="#faq">faq</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<?php } ?>
<div class="nav-links pull-right">
<ul>
<li><a href="page1">our app</a></li>
<li><a href="#contact">the device</a></li>
</ul>
</div>
</div>
CSS
.navmenu {
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color:#17607D;
}
.navmenu a.pull-left img {
position:absolute;
}
.navmenu li {
display: inline-block !important;
margin-right: 15px;
line-height: 40px;
vertical-align: middle;
}
.navmenu ul {text-align:center;line-height:60px}
.navmenu img {
margin-top:4px;
margin-left:6px;
}
.navmenu li a {
font-size: 23px;
color:#51c4d4;
letter-spacing:1px;
font-family:'EdmondSans', helvetica,sans-serif;
text-decoration:none;
}
.navmenu li a:hover {
color:#fff;
}