There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too much space when it's in a static or fixed position. It consists of a pre-header with social media links, a small address, and a log-in button, a title-header containing the logo image along with the business name and motto, and finally the navigation menu. All of this is wrapped in a div with their corresponding sub-divs. I have used Bootstrap as a template for the menu navigation. My goal is to make the pre-header and logo image disappear when scrolling down, leaving only the title, name, motto, and navigation menu visible. Here's a snippet of the code:
The CSS code is quite lengthy and can be confusing as it contains styles for other pages in the same project. Any suggestions or recommendations on how to achieve the desired effect would be greatly appreciated.
html {
background-color: #fff;
}
body {
margin: 0;
padding: 0;
background-color: #f6f6f6 !important;
}
.container {
max-width: 985px;
margin: 0 auto;
}
...
(CSS styles continue)
...