templates/AppTemplates/layout/header.html.twig line 1

Open in your IDE?
  1. <!-- Link header ici css -->
  2. <link rel="stylesheet" href="{{asset('css/header.css')}}">
  4. <style>
  5.    .navbar {
  6.       padding:0 5.5%!important;
  7.       box-shadow:unset;
  8.    }
  9.    .navbar-menu > a {
  10.       border-bottom: solid 3px white
  11.    }
  12. </style>
  15. <!-- HTML Header -->
  16. <header class="navbar" id="navbar">
  17.    <div class="navbar-overlay" onclick="toggleMenuOpen()"></div>
  19.    <button type="button" class="navbar-burger" onclick="toggleMenuOpen()">
  20.       <i class="fas fa-bars"></i>
  21.    </button>
  23.    <h1 class="navbar-title">
  24.    
  25.       <a href="{{path('app_home')}}" style="display:flex"><img id="logo" src="{{asset('img/logo.png')}}" width="120" height="50"></a>
  28.    </h1>
  29.    
  30.    <nav class="navbar-menu">
  31.       <span style="visibility:hidden">Menu</span>
  33.       {% include "AppTemplates/layout/headerLinks.html.twig" %}
  34.    </nav>
  35. </header>
  37. <!-- HTML Header Script -->
  38. <script>
  39.    const toggleMenuOpen = () => document.body.classList.toggle("open");
  41. window.addEventListener('scroll', function() {
  42.    var navbar  = document.querySelector('.navbar'); // Remplacez 'header' par le sélecteur CSS de votre élément header
  43.    var logoImg = document.querySelector('#logo'); 
  44.    if (window.scrollY >= 35) {
  45.          navbar.setAttribute('style', 'box-shadow:0 0 3px 0 rgba(0,0,0,0.22)');
  46.          logo.setAttribute('style', 'transform:unset!important');
  47.          logo.parentNode.setAttribute('style', 'margin-top:0!important');
  48.    } else {
  49.          navbar.setAttribute('style', ''); // Réinitialisez la couleur du background si le défilement est inférieur à 35px
  50.          logo.setAttribute('style', '');
  51.          logo.parentNode.setAttribute('style', '');
  52.    }
  53. });
  56. // ici function pour le menu défillement hidden quand tu scroll de bas en haut
  58. var prevScrollPos = window.pageYOffset;
  60. window.onscroll = function() {
  61.   var currentScrollPos = window.pageYOffset;
  63.   if (prevScrollPos < currentScrollPos && currentScrollPos != 0) {
  64.     //document.getElementById("navbar").classList.remove("hidden");
  65.   } else if (window.scrollY < 1){
  66.     //document.getElementById("navbar").classList.remove("hidden");
  67.   } else {
  68.     //document.getElementById("navbar").classList.add("hidden");
  69.   }
  71.   prevScrollPos = currentScrollPos;
  72. };
  73. </script>
  75. <style>
  76. #header {
  77.   /* Vos styles d'en-tête */
  78.   transition: transform 0.3s ease-in-out;
  79. }
  81. .hidden {
  82.   transform: translateY(-100%);
  83. }
  84. </style>