I have encountered a roadblock while working on my website: the links in my navigation bar are not properly redirecting users to other pages on my site.
You can see an example of my navigation bar here. I implemented a technique I discovered on gmarwaha.com, but it seems I may have missed a step somewhere along the way and I'm struggling to pinpoint the error.
Although the CSS code is slightly different from the original source, I still based it on the design found there. Here's a snippet of the CSS:
.lavaLampBottomStyle {
position: relative;
height: 29px;
width: 342px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
margin-left: auto;
margin-right: auto; }
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
The JavaScript code included in the head section of my document plays a crucial role as well:
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
If anyone could assist me in identifying and resolving this issue, I would greatly appreciate it.