Блог

 .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; } 

 lt;!doctype htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1"gt;  lt;meta name="description" content=""gt;  lt;meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors"gt;  lt;meta name="generator" content="Hugo 0.84.0"gt;  lt;titlegt;Troubleshooting min-widthlt;/titlegt;  lt;script  src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"gt;lt;/scriptgt;  lt;!-- Bootstrap core CSS --gt;  lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"gt;  lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"gt;lt;/scriptgt;    lt;stylegt;  #headerResizer {  height: 192px; /* taller height which will shrink on scroll (using JS) */  }  lt;/stylegt;   lt;/headgt;  lt;body class="py-0"gt;  lt;div class="display-size-indicator"gt;lt;/divgt;  lt;maingt;   lt;div class="container"gt;  lt;nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light sticky-lg-top flex-column" style="z-index: 2000;"gt;  lt;div class="container-fluid d-flex align-items-stretch"gt;  lt;a class="navbar-brand" href="/"gt;lt;img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAICAYAAAD0g6 qAAAAM0lEQVQokWNQnPb5PwMaUJz2 T 6OEExbJLobKLESDUIp7oBMQg5TCh2EX0MQo9acqIfABEwl6J1tl/FAAAAAElFTkSuQmCC" style="height:32px; image-rendering: pixelated; image-rendering: crisp-edges;" alt="logo"gt;lt;/agt;   lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"gt;  lt;span class="navbar-toggler-icon"gt;lt;/spangt;  lt;/buttongt;   lt;div class="collapse navbar-collapse" id="navbarSupportedContent"gt;   lt;!-- Search Field amp; Button --gt;  lt;form class="d-flex"gt;  lt;input class="form-control form-control-sm me-2" type="search" placeholder="Search" aria-label="Search"gt;  lt;button class="btn btn-sm btn-outline-primary btn-light" type="submit"gt;Searchlt;/buttongt;  lt;/formgt;   lt;!-- Log In amp; Register Modal Button --gt;  lt;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"gt;  Log In / Register  lt;/buttongt;  lt;!-- Modal --gt;  lt;div class="modal fade" id="modalForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;h5 class="modal-title" id="exampleModalLabel"gt;User Loginlt;/h5gt;  lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"gt;lt;/buttongt;  lt;/divgt;  lt;div class="modal-body"gt;  lt;formgt;  lt;div class="mb-3"gt;  lt;!-- lt;label class="form-label"gt;Email Addresslt;/labelgt; --gt;  lt;input type="text" class="form-control" id="username" name="username" placeholder="Email" /gt;  lt;/divgt;  lt;div class="mb-3"gt;  lt;!-- lt;label class="form-label"gt;Passwordlt;/labelgt; --gt;  lt;input type="password" class="form-control" id="password" name="password" placeholder="Password" /gt;  lt;/divgt;  lt;div class="mb-3 form-check"gt;  lt;input type="checkbox" class="form-check-input" id="rememberMe" /gt;  lt;label class="form-check-label" for="rememberMe"gt;Remember Melt;/labelgt;  lt;/divgt;  lt;div class="modal-footer d-block"gt;  lt;p class="float-start"gt;lt;a href="#"gt;Registerlt;/agt;lt;/pgt;  lt;p class="float-start mx-4"gt;lt;a href="#"gt;Reset Passwordlt;/agt;lt;/pgt;   lt;button type="submit" class="btn btn-warning float-end"gt;Log Inlt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;/divgt;   lt;/divgt;   lt;div class="collapse navbar-collapse" id="headerResizer"gt;  lt;/divgt;   lt;div id="navbarSupportedContent" class="collapse navbar-collapse nav-fill w-100"gt;  lt;ul id="scrollGetNavBarHeight" class="navbar-nav nav-fill w-100 me-auto mb-2 mb-lg-0 navbar-shadow"gt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;   lt;li class="nav-item"gt;  lt;a class="nav-link" href="#"gt;Linklt;/agt;  lt;/ligt;    lt;/ulgt;  lt;/divgt;  lt;/navgt;   lt;div style="width:100%; min-height:2000px; background-color:#eee; padding:10px; margin-bottom:50px; line-height:6; font-size:16px"gt;  Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;  Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;  Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;  Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;  Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;Scrollable contentlt;br/gt;  lt;/divgt;     lt;/maingt;  lt;scriptgt; // 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() gt; 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');  }   } }); lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;