I have a fixed menu on my website that is working perfectly fine. I also have a container (not using Bootstrap) that should stay fixed when it reaches the static menu. Everything is functioning as expected, except when I resize the window, the container seems to move to an absolute position with a top value of 0. The CSS does not indicate this explicitly, as the position is still set to fixed, but visually it is not correct. I have searched through numerous resources like Stack Overflow for solutions, but none have provided a satisfying answer. Can anyone help? Thank you.
// JavaScript code here
// More code here
.header-container {
// CSS styles for header container
}
.grid12-12 {
// CSS styles for grid elements
}
.page-content {
// CSS styles for page content
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
This is my menu.
</div>
<div class="page-content">
This is my page content.
<div>
<div class="box-additional box-tabs grid12-12">
This is my container.
</div>