Currently, I am building a website using Bootstrap and the DataTables library. The problem I am encountering is that the sticky table header is working fine, but it overlaps with the sticky nav bar. Is there a way to make the navbar "push down" the table header instead of overlapping it?
Initial State: https://i.sstatic.net/ZLJTru0m.png
When Scrolling: https://i.sstatic.net/igdP5Dj8.png
I am looking for a solution that does not involve adding fixed margin or padding to elements as that could be considered a hacky approach.
Here is the HTML definition of the table:
<table id="measurementsTable" class="cell-border stripe border w-100">
And here is the JavaScript code used:
document.addEventListener('DOMContentLoaded', () => {
let measurementsTable = new DataTable('#measurementsTable', {
fixedHeader: true,
fixedColumns: true,
scrollX: true,
layout: {
topStart: {
info: {
text: '_TOTAL_ filters',
}
},
bottomStart: null,
},
ordering: false,
paging: false,
});
});