Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project.
The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" element stacked on top of each other. As the page is scrolled down, I only want to display the "h5" element.
To achieve this, I have used JavaScript hide and show methods. However, after hiding the elements and setting the display to "none", the "h5" element jumps slightly to occupy the center of the navbar.
I am looking for a solution to eliminate this minor jump at the end.
I have attempted transitions with opacity, visibility, height = 0, and others. While they partially work, I still need to manually readjust the position of the h5 element. I am wondering if there is a simpler solution to this issue.
<!--NAVBAR-->
// Navbar code here
</nav>
<!--NAVBAR-->
<div class="container">Placeholder Lorem Ipsum content here.</div>
// Scripts go here
CSS Code:
// CSS styling goes here
body {
background-color: rgb(65, 61, 61);
}
nav {
background-color: dimgray;
}
#mainNavbar {
padding-bottom: 0;
transition: all 0.7s ease;
}
.navbar-brand {
color: white;
}
// More CSS styles...
In essence, my goal is to smoothly fade out the icon and the "p" elements when the user scrolls down.