templates/layouts/header.html.twig line 1

Open in your IDE?
  1. <!--==================================================-->
  2. <!-- Start Top Header Area -->
  3. <!--==================================================-->
  4. <div class="top-bar-area">
  5.     <div class="container">
  6.         <div class="row align-items-center">
  7.             <div class="col-md-6">
  8.                 <div class="top-bar-info">
  9.                     <ul>
  10.                         <li><i class="bi bi-envelope-open"></i>boadsiege@boad.org</li>
  11.                         <li><i class="bi bi-geo-alt-fill"></i>68, Avenue de la Libération</li>
  12.                     </ul>
  13.                 </div>
  14.             </div>
  15.             <div class="col-md-6">
  16.                 <div class="top-bar-social-address">
  17.                     <ul>
  18.                         <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
  19.                         <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  20.                         <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
  21.                         <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
  22.                     </ul>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </div>
  28. <!--==================================================-->
  29. <!-- Start Top Header Area -->
  30. <!--==================================================-->
  32. <style>
  33.     .header-area {
  34.         background: #fff; /* Couleur de fond du header */
  35.         padding: 10px 0; /* Espacement vertical */
  36.     }
  38.     .header-logo {
  39.         display: flex;
  40.         justify-content: flex-start;
  41.         align-items: center;
  42.     }
  44.     .header-menu {
  45.         display: flex;
  46.         justify-content: center;
  47.         align-items: center;
  48.     }
  50.     .header-menu ul {
  51.         list-style: none;
  52.         margin: 0;
  53.         padding: 0;
  54.         display: flex;
  55.     }
  57.     .header-menu ul li {
  58.         margin: 0 35px; /* Espacement entre les éléments du menu */
  59.     }
  61.     .header-menu ul li a {
  62.         text-decoration: none;
  63.         color: #333; /* Couleur des liens */
  64.         font-size: 30px; /* Taille de la police */
  65.     }
  67.     @media (max-width: 768px) {
  68.         .header-logo, .header-menu {
  69.             flex: 1 0 100%;
  70.             justify-content: center;
  71.             margin-bottom: 10px;
  72.         }
  74.         .header-menu ul {
  75.             flex-direction: column;
  76.         }
  78.         .header-menu ul li {
  79.             margin: 10px 0;
  80.         }
  81.     }
  83. </style>
  85. <!--==================================================-->
  86. <!-- Start Header Area -->
  87. <!--==================================================-->
  88. <div class="header-area" id="sticky-header">
  89.     <div class="container">
  90.         <div class="row align-items-center">
  91.             <div class="col-md-2">
  92.                 <div class="header-logo">
  93.                     <a href="{{ path('app_default') }}"><img src="{{ asset('assets/images/logo_boad.png') }}" alt="logo" style="height: 115px"></a>
  94.                 </div>
  95.             </div>
  96.             <div class="col-md-10">
  97.                 <div class="header-menu">
  98.                     <ul class="nav_scroll">
  99.                         <li><a href="{{ path('app_default') }}">Accueil</a></li>
  100.                         <li><a href="#documents">Documents</a></li>
  101.                         <li><a href="#contact">Contact</a></li>
  102.                     </ul>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </div>
  107. </div>
  110. <!--==================================================-->
  111. <!-- End Header Area -->
  112. <!--==================================================-->
  116. <!--==================================================-->
  117. <!-- Start Main Menu Area -->
  118. <!--==================================================-->
  119. <div class="mobile-menu-area sticky d-sm-block d-md-block d-lg-none ">
  120.     <div class="mobile-menu">
  121.         <nav class="header-menu">
  122.             <ul class="nav_scroll">
  123.                 <li><a href="{{ path('app_default') }}">Accueil</a></li>
  124.                 <li><a href="#documents">Documents</a></li>
  125.                 <li><a href="#contact">Contact</a></li>
  126.             </ul>
  127.         </nav>
  128.     </div>
  129. </div>
  130. <!--==================================================-->
  131. <!-- End Main Menu Area -->
  132. <!--==================================================-->