An issue has arisen while using 'fixed-top' with Bootstrap 4. This feature works perfectly fine on the desktop for my nav bar, but when the navbar is collapsed, it fails to fix itself at the absolute top. Instead, when scrolling in the collapsed state, about 50% of the navbar disappears before becoming fixed at the top. However, upon scrolling back up, the navbar reappears. Here's a link to a short video demonstration: Video Link
<div>
<nav id="mainNav" change-class class="navbar fixed-top navbar-expand-lg navbar-transparent">
<!-- Logo -->
<a class="navbar-brand text-white" href="#"><span class="logo-script">Some</span><span class="logo-block">Brand</span></a>
<!-- Toggler -->
...
In addition to this, I am utilizing AngularJS to add color changes on scroll, although this seems unrelated as it functions well on larger screens but truncates the fixed-top position on smaller ones.
Your feedback and insights are greatly appreciated.
UPDATE: After further investigation, it appears that a specific code block related to the header may be contributing to this issue. Here is the troublesome code snippet:
<div class="header">
...
.header {
background: #7F00FF;
height: 100vh;
}
The behavior observed suggests that the navbar loads first followed by the header section. Removing the header reduces the extent of the issue significantly.