Deleting that code fixes the problem, but of course the menu stays displayed when switching display size.
I found the following discussion:
Based on that, I hacked together the following code, but I must have made a mistake because it doesn’t work:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
jQuery(document).ready(function($) {
// Store the window width
var windowWidth = $(window).width();
// Verify if window width has actually changed
if ($(window).width() != windowWidth) {
// Update the window width for next time
windowWidth = $(window).width();
$(window).resize(function () {
var x = document.getElementById("burger-menu");{
x.style.display = "none";
}
}
// Otherwise do nothing
});
});
</script>
UPDATE: Sometimes the most simple solution is the best solution. I will use the following code in Page Settings > Header:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
</script>
And I will add the “d-lg-none” class to my “#burder-menu”. That combination seems to work fairly well.
Thank you for your help, @Pealco.