I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide.
However, I'm facing an issue with moving the active link to the top of the navigation when the screen size is less than or equal to 800 pixels wide. I've tried using Javascript, but it doesn't keep the active link at the top because the page refreshes or changes when a link is clicked.
I attempted to implement a loop within an if-statement, but it didn't work as expected, so I removed the if-statement altogether.
If anyone could provide assistance in solving this problem, I would greatly appreciate it.
Below is the snippet of Javascript code:
/*------------------------move active link to top------------------------*/
function moveLink(){
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var list = document.getElementById('nav').childNodes;
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('click',function()
{nav.insertBefore(this, nav.childNodes[0])});
}
}
Here's the HTML structure of the navigation:
<nav>
<ul id="nav" class="topNav">
<li><a onclick="moveLink()" href="/">Placeholder1</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" class="active" href="licenses.html">Placeholder1 / FAQ</a></li>
<li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
<li><a onclick="moveLink()" href="contact.php">Placeholder1</a></li>
<li class="icon"><a href="javascript:void(0);" onclick="myFunction()">
<img alt="open menu" src="graphics/menu.png" style="height: 30px; width: 30px;"></a>
</li>
</ul>
Please note that there are two stylesheets used in this setup and the menu opening and closing functionality is handled via Javascript.
Here's the CSS for the mobile layout:
/*------------------------navigation------------------------*/
.topNav {
z-index: 1;
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
font-size: 0px;
background-color: rgba(0,0,0,0.8);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
.topNav li {
display: inline;
}
.topNav li a {
font-size: 12px;
display: inline-block;
color: #fff;
text-decoration: none;
transition: color 0.2s ease-in-out;
line-height: 38px;
padding: 0px 0px 0px 20px;
}
.topNav li a:hover {
color: #777;
}
.topNav li a.active {
color: #999;
}
/*------------------------responsive navigation closed------------------------*/
.topNav li:not(:first-child) {
display: none;
}
.topNav li.icon {
float: right;
display: inline-block;
height: 38px;
vertical-align: middle;
transition: opacity 0.2s ease-in-out;
margin: 4px 5px 0px 0px;
width: 30px;
height: 30px;
padding-right: 20px;
}
.icon:hover {
opacity: 0.5;
}
/*------------------------responsive navigation opened------------------------*/
.topNav.responsive {
position: fixed;
top: 0px;
}
.topNav.responsive li.icon {
margin: 0 0 0 0;
position: absolute;
top: 4px;
right: 25px;
width: 30px;
height: 30px;
padding-right: 0px;
z-index: 1;
}
.topNav.responsive li.icon:hover {
opacity: 0.5;
}
.topNav.responsive li {
float: none;
display: inline;
}
.topNav.responsive li a {
display: block;
}
Thank you in advance, Ken