While putting together a webpage that has a collapsible header, and a large logo that fades out when the desktop version of the page is scrolled down, and is supposed to be replaced with a smaller logo in a different location. However, I've run into the problem that the smaller logo remains at the starting value for opacity. If I start it at opacity: 0; it remains transparent, and if I start it at opacity:1; it remains opaque. (To clarify, the small logo is intended to be always present on smaller mobile displays, but starting from min-width:992px is supposed to only appear when the header collapses, as it takes the place of the larger desktop-only logo.)
In other words, none of my media queries for the opacity property are being acknowledged. Other rules within media queries are, for things like font-size. I don't understand why opacity would be ignored. When I inspect the CSS using Developer Tools, I can't even find a crossed out value being overridden, which is perplexing.
I am using Bootstrap 5, but even when I unlink Bootstrap's Javascript and CSS it doesn't affect any declarations pertaining to the logo's opacity.
What am I overlooking?
.navbar {
padding-bottom: 0px;
}
.nav-link {
font-size: 20px;
}
nav#main-nav {
background-color: #fff !important;
}
nav#main-nav::after /*for header bg images*/ {
content: "";
top: 0;
left: 0;
bottom: 42px; /* this should match the height of the nav bar */
right: 0;
position: absolute;
z-index: -1;
opacity: 1.0;
transition: opacity 0.4s;
background-image:
url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6 qAAAAM0lEQVQokWNQnPb5PwMaUJz2 T 6OEExbJLobKLESDUIp7oBMQg5TCh2EX0MQo9acqIfABEwl6J1tl/FAAAAAElFTkSuQmCC"),
url("https://lorempixel.com/1116/240/nature/1");
background-repeat: no-repeat;
background-position: center 60%, center 40%;
background-size: 28%, cover;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
nav#main-nav.desktop-collapse-on-scroll::after {
opacity: 0.0;
}
.navbar-shadow {
transition: box-shadow 0.4s;
box-shadow: 0px 0px 12px -12px #3E5E9E;
}
.desktop-collapse-on-scroll .navbar-shadow {
box-shadow: 0px 10px 12px -12px #3E5E9E;
}
.navbar-brand {
transition: opacity 0.2s; /* fade-out speed */
}
.desktop-collapse-on-scroll .navbar-brand {
transition: opacity 1.0s; /* fade-in speed */
}
.navbar-brand a img {
width: 202px;
height: 31px
}
/* media queries that aren't all taking effect */
@media (max-width: 991px) {
nav#main-nav::after {
background-image: none;
};
.navbar-brand {
opacity: 0; /* is NOT working */
};
}
@media (min-width: 576px) /*sm*/ {
}
@media (min-width: 768px) /*md*/ {
}
@media (min-width: 992px) /*lg*/ {
.nav-link {
font-size: 14px; /* is working */
};
.desktop-collapse-on-scroll .navbar-brand {
opacity: 1; /* is NOT working */
}
}
@media (min-width: 1200px) /*xl*/ {
.nav-link {
font-size: 17px; /* is working */
};
nav#main-nav::after {
background-position: center 12%, center 38%;
};
}
@media (min-width: 1400px) /*xxl*/ {
}
.nav-link {
overflow-wrap: break-word;
white-space: nowrap;
overflow: hidden;
height: 42px;
padding-top: 0.6rem;
}
.navbar-light .navbar-nav .nav-link:link {background-color: #B3D1F4; color: #3D6ECF;}
.navbar-light .navbar-nav .nav-link:visited {background-color: #B3D1F4; color: #3D6ECF;}
.navbar-light .navbar-nav .nav-link:hover {}
.navbar-light .navbar-nav .nav-link:focus {}
.navbar-light .navbar-nav .nav-link:active {}
ul.dropdown-menu.show {
background-color: #BDE8FF;
}
.dropdown-item {
color: #3E5E9E;
}
.navbar-collapse {
flex-grow: 0;
}
nav .dropdown-toggle::after {
margin-left: 0em;
}
nav .btn {
word-break: keep-all;
}
nav .mr-lg-0 {
margin-right: 0 !important;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Troubleshooting min-width</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
#headerResizer {
height: 192px; /* taller height which will shrink on scroll (using JS) */
}
</style>
</head>
<body class="py-0">
<div class="display-size-indicator"></div>
<main>
<div class="container">
<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light sticky-lg-top flex-column" style="z-index: 2000;">
<div class="container-fluid d-flex align-items-stretch">
<a class="navbar-brand" href="/"><img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6 qAAAAM0lEQVQokWNQnPb5PwMaUJz2 T 6OEExbJLobKLESDUIp7oBMQg5TCh2EX0MQo9acqIfABEwl6J1tl/FAAAAAElFTkSuQmCC" style="height:32px; image-rendering: pixelated; image-rendering: crisp-edges;" alt="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Search Field & Button -->
<form class="d-flex">
<input class="form-control form-control-sm me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-sm btn-outline-primary btn-light" type="submit">Search</button>
</form>
<!-- Log In & Register Modal Button -->
<button type="button" class="btn btn-primary btn-sm mx-lg-2 mb-2 mb-lg-0 mr-lg-0 d-block" data-bs-toggle="modal" data-bs-target="#modalForm">
Log In / Register
</button>
<!-- Modal -->
<div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">User Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<!-- <label >Email Address</label> -->
<input type="text" class="form-control" id="username" name="username" placeholder="Email" />
</div>
<div class="mb-3">
<!-- <label >Password</label> -->
<input type="password" class="form-control" id="password" name="password" placeholder="Password" />
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="rememberMe" />
<label class="form-check-label" for="rememberMe">Remember Me</label>
</div>
<div class="modal-footer d-block">
<p class="float-start"><a href="#">Register</a></p>
<p class="float-start mx-4"><a href="#">Reset Password</a></p>
<button type="submit" class="btn btn-warning float-end">Log In</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="headerResizer">
</div>
<div id="navbarSupportedContent" class="collapse navbar-collapse nav-fill w-100">
<ul id="scrollGetNavBarHeight" class="navbar-nav nav-fill w-100 me-auto mb-2 mb-lg-0 navbar-shadow">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div style="width:100%; min-height:2000px; background-color:#eee; padding:10px; margin-bottom:50px; line-height:6; font-size:16px">
Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>Scrollable content<br/>
</div>
</main>
<script> // For resizing the header on scroll. Original code credit: https://jsfiddle.net/jezzipin/JJ8Jc/
$(function(){
$('#headerResizer').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#headerResizer').data('size') == 'big')
{
$('#headerResizer').data('size','small');
$('#headerResizer').stop().animate({
height:'0px' // min height of resizer
},400); // time
$('#main-nav').addClass('desktop-collapse-on-scroll');
}
}
else
{
if($('#headerResizer').data('size') == 'small')
{
$('#headerResizer').data('size','big');
$('#headerResizer').stop().animate({
height:'192px' // max height of resizer
},400); // time
$('#main-nav').removeClass('desktop-collapse-on-scroll');
}
}
});
</script>
</body>
</html>CodePudding user response：
You have a syntax error in your CSS, there is no ; after a } in CSS.
If you write valid CSS your rules will be applied to the elements.
nav#main-nav::after {
background-image: none;
} /* NO ; here */
.navbar-brand {
opacity: 0; /* is NOT working */
} /* NO ; here either */