When building a webpage with a collapsible header and a fading large logo that transitions to a smaller version in a different location upon scrolling down on the desktop view, there seems to be an issue. The smaller logo's opacity property does not respond to media queries as expected. Setting it to opacity: 0; keeps it transparent, while setting it to opacity:1; maintains its opaque state. This small logo should only appear when the header collapses from min-width:992px, replacing the larger desktop-only logo but it doesn't behave as intended.
Interestingly, other properties inside media queries such as font-size work fine, but for some reason, the opacity attribute is being ignored. Even after removing Bootstrap's Javascript and CSS links, no changes affect the logo's opacity declarations.
The cause of this oversight remains unclear. Looking into the CSS via Developer Tools reveals no overridden crossed-out values, adding to the confusion.