Dev Faq
0
votes

Bootstrap: NAVBAR Rétrécissez sur Scroll

J'aimerais que le logo et la NAV-Links soient réduits lorsque la page est défilée. Pour le moment, le logo est trop grand sur la valeur liquidative collante. J'ai essayé d'ajouter ce code JS - xxx pré>

avec les CSS suivants, mais cela n'a pas fonctionné .... p> 

<nav class="navbar navbar-expand-lg navbar-main sticky-top">
    <a class="navbar-brand" href="#">
            <img class="logo" src="logo.jpg"></a>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>


          <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">
            <a class="dropdown-item" href="#">Business Phone Systems</a>
            <a class="dropdown-item" href="#">Cat 6</a>
            <a class="dropdown-item" href="#">Cat 6a</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">
            <a class="dropdown-item" href="#">Cat 5</a>
            <a class="dropdown-item" href="#">Cat 6</a>
            <a class="dropdown-item" href="#">Cat 6a</a>
          </div>

1 commentaires

Veuillez inclure tout du code concerné. Vous n'avez pas d'élément WTIH Classe en-tête .

3 Réponses :

-1
votes

Bonjour, je pense que cela demandera à votre problème.

p> 

<nav id="my-nav" class="navbar navbar-expand-lg navbar-main sticky-top heavy">
   <a class="navbar-brand" href="#">
   <img class="logo heavy-logo" id="my-logo" src="./logo.jpg"></a>
   </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
         <li class="nav-item active">
            <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">
               <a class="dropdown-item" href="#">Business Phone Systems</a>
               <a class="dropdown-item" href="#">Cat 6</a>
               <a class="dropdown-item" href="#">Cat 6a</a>
            </div>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">
               <a class="dropdown-item" href="#">Cat 5</a>
               <a class="dropdown-item" href="#">Cat 6</a>
               <a class="dropdown-item" href="#">Cat 6a</a>
            </div>
         </li>
      </ul>
   </div>
</nav>
<div class="container"></div>
<style>

.little{
   height: 150px;
}

.heavy{
   height: 200px;

}

.little-logo{
   height: 30px;
}

.heavy-logo{
   height: 50px;
}

.container{
   height: 2000px;
}

nav{
   position: fixed;
   width: 100%;
   border: solid 1px;

}

</style>

<script type="text/javascript">

window.onscroll = function(ev) {

    if (window.scrollY > 0) {
        document.getElementById("my-nav").classList.remove('heavy');
        document.getElementById("my-nav").classList.add('little');
        document.getElementById("my-logo").classList.remove('heavy-logo');
        document.getElementById("my-logo").classList.add('little-logo');
    } else {
       document.getElementById("my-nav").classList.remove('little');
       document.getElementById("my-nav").classList.add('heavy');
       document.getElementById("my-logo").classList.remove('little-logo');
       document.getElementById("my-logo").classList.add('heavy-logo');
    }
};

</script>

0 commentaires
0
votes

Utilisez ceci pendant 5 secondes dans la rétrécissement: xxx

et ajoutez xxx

2 commentaires

Merci, va donner ça un aller!

@Jamesskerner a fait cela a fonctionné ??? Donnez-lui une tique verte !!!!

1
votes

J'espère que cela vous aidera beaucoup.

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-main sticky-top navbar-dark bg-dark" id="navbar">
  <a class="navbar-brand" href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">
          <a class="dropdown-item" href="#">Business Phone Systems</a>
          <a class="dropdown-item" href="#">Cat 6</a>
          <a class="dropdown-item" href="#">Cat 6a</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">
          <a class="dropdown-item" href="#">Cat 5</a>
          <a class="dropdown-item" href="#">Cat 6</a>
          <a class="dropdown-item" href="#">Cat 6a</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<div class="container">
	<div class="row">
		<div class="col-md-2">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
			<hr>
			Last Line...
		</div>
	</div>
</div>

1 commentaires

À votre santé! Je vais donner ça un aller :)

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor