I encountered a strange issue with the sticky top navigation bar on my website. You can view the problem by visiting this link to the fiddle code and I've included the relevant details below.
There are three specific areas where the problem arises:
- In the hero image section, the top nav background appears transparent instead of white as intended.
https://i.sstatic.net/y0e6b.png
- The top navigation bar is erroneously displayed behind a slider rather than above it.
https://i.sstatic.net/8WgpN.png
- Hovering over an item in the grid layout causes the item to appear above the top nav bar.
Here are some visual references to illustrate the issues:
Normal state: https://i.sstatic.net/ZeTe0.png
Hover state: https://i.sstatic.net/DK50x.png
Your assistance in resolving these problems would be greatly appreciated!
HTML Code:
<!-- HTML code goes here -->CSS Styles:
.boxA:after {
/* CSS code here */
}
/* More CSS styles... */JQuery Script:
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 3000,
mode: 'fade',
speed: 1200,
pager: false
});
});
(function ($) {
// JQuery script here
}(jQuery));