javascripthtmlcssdatatables-1.10
Dropdown navbar subitems overlap datatable causing it to look transparent
I am working on a website with a page that shows the navbar on top and a datatable underneath. However, when I hover over the navbar which causes the subitems to drop down, I notice the parts that overlap the datatable, look almost transparent.
I have added the code of a simplified version of my webpage as well as some screenshot to visualize the problem I am facing. What is causing this problem and how can I solve it?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.css"/>
<style>
#container {
margin: 0 auto;
max-width: 1100px;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #0177bf;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #0177bf;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 15px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #026dae; color: white; }
nav a:hover { background-color: #026dae; color: white; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; color: white; }
nav ul ul li {
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu { display: none; position: absolute; }
.toggle {
display: block;
background-color: #0177bf;
padding: 0 10px;
color: #FFF;
font-size: 22px;
font-weight:bold;
line-height: 60px;
text-decoration: none;
border: none;
}
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; color: white;}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static; }
@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
}
</style>
<!-- JavaScript -->
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
responsive: true,
pageLength: 25
});
});
</script>
</head>
<body>
<nav>
<label for="drop" class="toggle">≡ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="/dashboard">Dashboard</a></li>
<li>
<label for="drop-1" class="toggle">Ticket Management</label>
<a href="#">Ticket Management</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="/members">Add New Tickets</a></li>
<li><a href="/member?action=new">Sell Tickets</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Event Management</label>
<a href="#">Event Management</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="/events">Event Calendar</a></li>
<li><a href="/event?action=new">Add New Event</a></li>
<li><a href="/my-events">My Events</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<table id="membersTable" class="table table-striped table-bordered" style="width:100%">
<thead id="membersTableHeaders">
<tr>
<th data-priority="2"></th>
<th data-priority="1"></th>
<th data-priority="1"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>Solution
Your nav is declared first in the HTML so it's underneath everything else. You need to set z-index to something high, but not higher than modals, and with that you need to set position anything other than static.
nav{
position: relative;
z-index: 999;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.css"/>
<style>
#container {
margin: 0 auto;
max-width: 1100px;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #0177bf;
position: relative;
z-index: 999;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #0177bf;
}
nav a {
display: block;
padding: 0 10px;
color: #FFF;
font-size: 15px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #026dae; color: white; }
nav a:hover { background-color: #026dae; color: white; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; color: white; }
nav ul ul li {
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu { display: none; position: absolute; }
.toggle {
display: block;
background-color: #0177bf;
padding: 0 10px;
color: #FFF;
font-size: 22px;
font-weight:bold;
line-height: 60px;
text-decoration: none;
border: none;
}
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; color: white;}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static; }
@media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
}
</style>
<!-- JavaScript -->
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/fc-4.2.2/fh-3.3.2/r-2.4.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#membersTable').DataTable({
responsive: true,
pageLength: 25
});
});
</script>
</head>
<body>
<nav>
<label for="drop" class="toggle">≡ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="/dashboard">Dashboard</a></li>
<li>
<label for="drop-1" class="toggle">Ticket Management</label>
<a href="#">Ticket Management</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="/members">Add New Tickets</a></li>
<li><a href="/member?action=new">Sell Tickets</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Event Management</label>
<a href="#">Event Management</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="/events">Event Calendar</a></li>
<li><a href="/event?action=new">Add New Event</a></li>
<li><a href="/my-events">My Events</a></li>
</ul>
</li>
</ul>
</nav>
<div class="container">
<table id="membersTable" class="table table-striped table-bordered" style="width:100%">
<thead id="membersTableHeaders">
<tr>
<th data-priority="2"></th>
<th data-priority="1"></th>
<th data-priority="1"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="2"></th>
<th data-priority="1"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>- Ways to extend Array object in javascript
- Building bundle for web in vite
- Is there any way to hide the mapbox access token when initializing the map?
- Playwright - sharing state between tests
- How to create a thumbnail after cropping an image with jQuery Cropper
- Validate kendo upload control
- jQuery button click not showing/hiding content
- What's the difference between self and window?
- Small value in doughnut chart is not visible - Chartjs
- How can a function know whether it has been invoked as a constructor (using the `new` keyword)?
- What are the differences between a function expression (`function (…) { … }`) and invoking the Function constructor (`new Function(…)`)?
- Why is it possible for functions to have properties like objects? Are functions also objects?
- console.log timestamps in Chrome
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- Creating a new Date object or using setter methods of javascript Date()
- PHP request to PHP Websocket
- Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript
- Is there some default popup for appstore download on itunes when webapp is viewed in mobile safari?
- Turn off webcam/camera after using getUserMedia
- Show a message if a text is copied successfully(alternative to alert)
- "Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox
- How to get the first Tamil letter in a word?
- handle both mouse and touch events on touch screens
- Truncate number to two decimal places without rounding
- Tailwindcss in webpack configuration not getting applied
- How to access $children for creating Tabs component?
- How to load a gzip compressed javascript without a webserver?
- What's the yield keyword in JavaScript?
- How to get the value of a selected radio button