templates/Theme/General/Template/Menu/menubare.html.twig line 1

Open in your IDE?
  1. {% if position == 'admin' %}
  2. <body id="callyou" class="margin-medium" style="overflow-x: hidden;
  3.     background: url({{ asset('template/images/assistance-bg.jpg') }});
  4.     background-color: #245d00;
  5.     background-repeat: no-repeat;
  6.      background-size: 100%;
  7.      position:relative; background-position: top center;">
  8.     
  9. <!-- Start Page Loading -->
  10. <div id="loader-wrapper">
  11.     <div id="loader"></div>        
  12.     <div class="loader-section section-left"></div>
  13.     <div class="loader-section section-right"></div>
  14. </div>
  15. <!-- End Page Loading -->
  17. <!-- //////////////////////////////////////////////////////////////////////////// -->
  18. <div class=" bg-struct user-menu-bar-lg" style="position: fixed!important; z-index: 500; top: 0px; right: 0px; padding: 5px; margin-top: 0px; color: #fff; width: 585px; margin-right: 50px; border-radius: 0px 0px 0px 20px;">
  19. <a href="{{ path('users_user_acces_plateforme') }}" style="color: #fff;"><i class="mdi-action-account-balance-wallet" style="font-size: 13px;"></i> {{ 'Site'|trans }}</a> 
  20. <span class="mdi-av-stop" style="font-size: 10px;"></span> 
  21. <a href="{{ path('produit_service_afh_sps') }}" style="color: #fff;"><span class="mdi-action-settings-phone" style="font-size: 13px;"></span> {{ 'Supports'|trans }}</a>
  22. <span class="mdi-av-stop" style="font-size: 10px;"></span>
  24. <ul id="dropdownLang" class="dropdown-content" style="min-width: 150px; margin-top: 15px;">
  25.     <li><a href="" class="-text" style="padding: 8px 7px;"><img src="{{ asset('template/images/fr.png') }}" alt="France" class="" style="height: 15px; width: 20px;"> {{ 'Français'|trans }}</a></li>
  26.     <li><a href="" class="-text" style="padding: 8px 7px;"><img src="{{ asset('template/images/en.png') }}" alt="France" class="" style="height: 15px; width: 20px;"> {{ 'Anglais'|trans }}</a></li>
  27. </ul>
  29. <a href="#!" style="color: #fff;" class="dropdown-button" data-activates="dropdownLang"><span class="mdi-social-public" style="font-size: 13px;"></span> {{ 'Langues'|trans }} - {{ app.request.locale }} <span class="mdi-navigation-expand-more" style="font-size: 12px; display: inline-block; margin-top: 5px;"></span></a>
  31. <form method="post" action="" style="display: inline; margin-bottom: 0px;">
  32.     <div style="display: inline; float: right;">
  33.     <input type="search" name="motcle" required="" Placeholder="{{ 'Recherchez (Mot Clé)'|trans }}" style="margin-bottom: 0px; padding-left: 5px; width: 175px; border: 1px solid #ddd; display: inline; height: 25px; border-radius: 5px;"/>
  34.     <button class="btn waves-effect waves-light bg-struct" style="margin-bottom: 0px;padding: 0px 3px 3px 3px; border-radius: 5px; border: 1px solid #fff; height: 25px; margin-bottom: 2px;" type="submit"><span class="mdi-action-search" style="font-size: 15px; display: inline-block; margin-bottom: 10px!important;"></span></button>
  35.     </div>
  36. </form>
  37. </div>
  39. <!-- START HEADER -->
  40. <header id="header" class="page-topbar user-menu-bar-sm">
  41. <!-- start header nav-->
  42. <div class="navbar-fixed">
  43. <div class="navbar-fixed" style="margin-left: -5px;">
  44.     <nav class="teal">
  45.       <div class="nav-wrapper" style="background: #3565ae; width: 105%!important;">
  47.       </div>
  48.     </nav>
  49. </div>
  50. </div>
  51. <!-- end header nav-->
  52. </header>
  54. <section id="content">
  55. <!--breadcrumbs start-->
  56. <div id="breadcrumbs-wrapper" class="lighten-3">
  57.     <!-- Search for small screen -->
  58.     <div class="header-search-wrapper grey hide-on-large-only" style="background: transparent!important; margin-top: 2px;">
  59.     <form method="post" action="" style="display: inline!important;">
  60.         <button class="btn waves-effect waves-light bg-struct" style="position: absolute; bottom: 10px; left: 7px;padding: 0px 3px 3px 3px; border-radius: 5px; border: 1px solid #fff; height: 25px;" type="submit"><span class="mdi-action-search" style="font-size: 15px; display: inline-block; margin-bottom: 10px!important;"></span></button>
  61.         <input type="text" name="motcle" class="header-search-input z-depth-2" placeholder="Recherchez (Mot Clé)" style="text-align: left;" required="">
  62.     </form>
  63.     </div>
  64. </div>
  65. </section>
  67. <!-- END HEADER -->
  68. {% if slide|default(null) != null %}
  69.     <div style="height: 75px; margin-top: 75px; font-size: 30px; color: #fff;"><marquee><strong><a href="{% if slide.link != null %}{{ slide.link }}{% else %}#!{% endif %}" style="color: #fff;">{{ slide.titre|trans }}</a></strong></marquee></div>
  70. {% else %}
  71.     <div style="height: 75px; margin-top: 75px; font-size: 30px; color: #fff;"><marquee><strong><a href="#!" style="color: #fff;">{{ 'Base de données de l\'observatoire des PME du Cameroun'|trans }}</a></strong></marquee></div>
  72. {% endif %}
  74. <!-- END HEADER -->
  75. {% else %}
  76.     {% if position == 'offerts' %}
  77.     
  78.     <style>
  79.     .menu-client {
  80.     width: 100%;
  81. }
  82. .menu-client-container {
  83.   margin: 0 auto;
  84.   background: #3565ae;
  85. }
  87. .menu-client-mobile {
  88.   display: none;
  89.   padding: 20px;
  90. }
  91. .menu-client-mobile:after {
  92.   content: "\f394";
  93.   font-family: "Ionicons";
  94.   font-size: 2.5rem;
  95.   padding: 0;
  96.   float: right;
  97.   position: relative;
  98.   top: 50%;
  99.   -webkit-transform: translateY(-25%);
  100.           transform: translateY(-25%);
  101. }
  102. .menu-client-dropdown-icon:before {
  103.   content: "\f489";
  104.   font-family: "Ionicons";
  105.   display: none;
  106.   cursor: pointer;
  107.   float: right;
  108.   padding: 1.5em 2em;
  109.   background: #fff;
  110.   color: #333;
  111. }
  112. .menu-client > ul {
  113.   margin: 0 auto;
  114.   width: 100%;
  115.   list-style: none;
  116.   padding: 0;
  117.   position: relative;
  118.   /* IF .menu-client position=relative -> ul = container width, ELSE ul = 100% width */
  119.   box-sizing: border-box;
  120.   clear: right;
  121. }
  122. .menu-client > ul:before,
  123. .menu-client > ul:after {
  124.   content: "";
  125.   display: table;
  126. }
  127. .menu-client > ul:after {
  128.   clear: both;
  129. }
  130. .menu-client > ul > li {
  131.   float: right;
  132.   background: #fff;
  133.   padding: 0;
  134.   margin: 0;
  135. }
  136. .menu-client > ul > li a {
  137.   text-decoration: none;
  138.   padding: 1.5em 3em;
  139.   display: block;
  140. }
  141. .menu-client > ul > li:hover {
  142.   background: #f0f0f0;
  143. }
  144. .menu-client > ul > li > ul {
  145.   display: none;
  146.   width: 100%;
  147.   background: #f0f0f0;
  148.   padding: 20px;
  149.   position: absolute;
  150.   z-index: 99;
  151.   left: 0;
  152.   margin: 0;
  153.   list-style: none;
  154.   box-sizing: border-box;
  155.   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  156. }
  157. .menu-client > ul > li > ul:before,
  158. .menu-client > ul > li > ul:after {
  159.   content: "";
  160.   display: table;
  161. }
  162. .menu-client > ul > li > ul:after {
  163.   clear: both;
  164. }
  165. .menu-client > ul > li > ul > li {
  166.   margin: 0;
  167.   padding-bottom: 0;
  168.   list-style: none;
  169.   width: 25%;
  170.   background: none;
  171.   float: left;
  172. }
  173. .menu-client > ul > li > ul > li a {
  174.   color: #777;
  175.   padding: .2em 0;
  176.   width: 95%;
  177.   display: block;
  178.   border-bottom: 1px solid #ccc;
  179. }
  180. .menu-client > ul > li > ul > li a:hover{
  181.     color:#03a9f4;
  182. }
  183. .menu-client > ul > li > ul > li > ul {
  184.   display: block;
  185.   padding: 0;
  186.   margin: 10px 0 0;
  187.   list-style: none;
  188.   box-sizing: border-box;
  189. }
  190. .menu-client > ul > li > ul > li > ul:before,
  191. .menu-client > ul > li > ul > li > ul:after {
  192.   content: "";
  193.   display: table;
  194. }
  195. .menu-client > ul > li > ul > li > ul:after {
  196.   clear: both;
  197. }
  198. .menu-client > ul > li > ul > li > ul > li {
  199.   float: left;
  200.   width: 100%;
  201.   padding: 10px 0;
  202.   margin: 0;
  203.   font-size: .8em;
  204. }
  205. .menu-client > ul > li > ul > li > ul > li a {
  206.   border: 0;    
  207.   font-size: 14px;
  208. }
  209. .menu-client > ul > li > ul.normal-sub {
  210.   width: 300px;
  211.   left: auto;
  212.   padding: 10px 20px;
  213. }
  214. .menu-client > ul > li > ul.normal-sub > li {
  215.   width: 100%;
  216. }
  217. .menu-client > ul > li > ul.normal-sub > li a {
  218.   border: 0;
  219.   padding: 1em 0;
  220. }
  221. /* ––––––––––––––––––––––––––––––––––––––––––––––––––
  222. Mobile style's
  223. –––––––––––––––––––––––––––––––––––––––––––––––––– */
  224. @media only screen and (max-width: 959px) {
  225.   .menu-client-container {
  226.     width: 100%;
  227.     padding: 0px 20px;
  228.   }
  229.   .menu-client-container .menu-client{
  230.     display:inline-block;
  231.    }
  232.   .menu-client-mobile {
  233.     display: block;    
  234.     float: right;    
  235.     padding: 20px 20px 0;
  236.   }
  237.   .menu-client-dropdown-icon:before {
  238.     display: block;
  239.   }
  240.   .menu-client > ul {
  241.     display: none;
  242.     width:100%;
  243.   }
  244.   .menu-client > ul > li {
  245.     width: 100%;
  246.     float: none;
  247.     display: block;
  248.   }
  249.   .menu-client > ul > li a {
  250.     padding: 1.5em;
  251.     width: 100%;
  252.     display: block;
  253.   }
  254.   .menu-client > ul > li > ul {
  255.     position: relative;    
  256.     padding: 0 40px;
  257.   }
  258.   .menu-client > ul > li > ul.normal-sub {
  259.     width: 100%;
  260.   }
  261.   .menu-client > ul > li > ul > li {
  262.     float: none;
  263.     width: 100%;
  264.     margin-top: 20px;
  265.   }
  266.   .menu-client > ul > li > ul > li:first-child {
  267.     margin: 0;
  268.   }
  269.   .menu-client > ul > li > ul > li > ul {
  270.     position: relative;
  271.   }
  272.   .menu-client > ul > li > ul > li > ul > li {
  273.     float: none;
  274.   }
  275.   .menu-client .show-on-mobile {
  276.     display: block;
  277.   }
  278. }
  279. .menu-client > ul > li a{
  280.     color: #333;
  281. }
  282. .menu-client > ul > li a:hover{
  283.     color: #777;
  284. }
  285. .mzp-c-navigation-download {
  286.     float: right;
  287.     margin: 0px 0 0px 5px;
  288. }
  290. .my-link-style{
  291.     font-family: Inter,X-LocaleSpecific,sans-serif;
  292.     font-size: 1rem;
  293.     line-height: 1.5;
  294.         font-weight: 700;
  295.     margin-bottom: 0;
  296.     min-height: 40px;
  297. }
  298.     </style>
  299.     
  300.     <div class="mzp-c-navigation top-header-navigation">
  301.       <div class="mzp-c-navigation-l-content">
  302.         <div class="mzp-c-navigation-container">
  303.           <button class="mzp-c-navigation-menu-button" type="button" aria-controls="mzp-c-navigation-items">Menu</button>
  304.           <a href="{{ path('users_user_acces_plateforme') }}">
  305.           <div class="mzp-c-navigation-logo">
  306.                 <img src="{{ asset('template/images/logo-top.png') }}" alt="" style="height: 45px;"/>
  307.           </div>
  308.           </a>
  310.           <div class="mzp-c-navigation-items" id="mzp-c-navigation-items" aria-expanded="false">
  311.         <div class="mzp-c-navigation-download" style="margin-top: 15px; display: inline-block!important;">
  312.         
  313.         <div class="menu-client">
  314.         <ul class="clearfix text-left">
  315.           
  316.           <li><a href="#" class="my-link-style" style="border: 1px solid #ddd; border-radius: 10px;">Agir Maintenant</a>
  317.             <ul style="">
  318.               <div class="row"> 
  319.                   <div class="col-md-12"> 
  320.                       <li>
  321.                         <a href="{{ path('produit_produit_tarification_courant_product') }}">Acheter les actions d'une entreprise</a>
  322.                       </li>
  323.                   </div>
  324.                   <div class="col-md-12"> 
  325.                       <li>
  326.                         <a href="{{ path('produit_produit_tarification_souscription_amorcage') }}">Investir au capital d'amorçage</a>
  327.                       </li>
  328.                   </div>
  329.                   <div class="col-md-12"> 
  330.                       <li>
  331.                         <a href="#!">Déposer un projet pour étude</a>
  332.                       </li>
  333.                   </div>
  334.                   <div class="col-md-12"> 
  335.                       <li>
  336.                         <a href="{{ path('produit_produit_tarification_souscription_donation') }}">Faire un don pour une entreprise</a>
  337.                       </li>
  338.                   </div>
  339.               </div>
  340.             </ul>
  341.           </li>
  342.           
  343.           <li><a href="#" class="my-link-style">Mon compte</a>
  344.             <ul>
  345.               {% if app.user == null %}
  346.                     <li>
  347.                         <a href="{# { path('login') } #}"> 
  348.                             <img src="{{ asset('templatehome/images/logopartenaires.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/>
  349.                             <strong>Connexion</strong> </br>
  350.                             <div>Detail</div>
  351.                         </a>
  352.                     </li>
  353.                     <li>
  354.                         <a href="{{ path('users_user_inscription_user') }}"> 
  355.                             <img src="{{ asset('template/images/plus.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/>
  356.                             <strong>Inscription</strong> </br>
  357.                             <div>Detail</div>
  358.                         </a>
  359.                     </li>
  360.                 {% else %}
  361.                     <li>
  362.                         <a href="{{ path('users_user_user_accueil', {'id': app.user.id}) }}"> 
  363.                             <img src="{{ asset('template/images/co.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/>
  364.                             <strong>{{ app.user.name(30) }}</strong></br>
  365.                             <div>Detail</div>
  366.                         </a>
  367.                     </li>
  368.                     <li>
  369.                         <a href="{# { path('logout') } #}"> 
  370.                             <img src="{{ asset('template/images/logout.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/>
  371.                             <strong>Déconnexion</strong></br>
  372.                             <div>Detail</div>
  373.                         </a>
  374.                     </li>
  375.                 {% endif %}
  376.             </ul>
  377.           </li>
  378.         </ul>
  379.         </div>
  380.       
  381.       
  382.         <!-- <div class="menu" style="display: inline-block; max-width: 20px; float: left;"> -->
  383.           <!-- <ul> -->
  384.             <!-- <li class="login-menu"><i class="fa fa-user"></i> -->
  385.               <!-- <ul style="width: 300px; overflow: visible; text-align: left;"> -->
  386.                 <!-- {% if app.user == null %} -->
  387.                     <!-- <li> -->
  388.                         <!-- <a href="{# { path('login') } #}" style="display: block;">  -->
  389.                             <!-- <img src="{{ asset('templatehome/images/logopartenaires.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  390.                             <!-- <strong>Connexion</strong> </br> -->
  391.                             <!-- <div>Detail</div> -->
  392.                         <!-- </a> -->
  393.                     <!-- </li> -->
  394.                     <!-- <li> -->
  395.                         <!-- <a href="{{ path('users_user_inscription_user') }}" style="display: block;">  -->
  396.                             <!-- <img src="{{ asset('template/images/plus.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  397.                             <!-- <strong>Inscription</strong> </br> -->
  398.                             <!-- <div>Detail</div> -->
  399.                         <!-- </a> -->
  400.                     <!-- </li> -->
  401.                 <!-- {% else %} -->
  402.                     <!-- <li> -->
  403.                         <!-- <a href="{{ path('users_user_user_accueil', {'id': app.user.id}) }}" style="display: block;">  -->
  404.                             <!-- <img src="{{ asset('template/images/co.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  405.                             <!-- <strong>{{ app.user.name(30) }}</strong></br> -->
  406.                             <!-- <div>Detail</div> -->
  407.                         <!-- </a> -->
  408.                     <!-- </li> -->
  409.                     
  410.                     <!-- <li> -->
  411.                         <!-- <a href="{# { path('logout') } #}" style="display: block;">  -->
  412.                             <!-- <img src="{{ asset('template/images/logout.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  413.                             <!-- <strong>Déconnexion</strong></br> -->
  414.                             <!-- <div>Detail</div> -->
  415.                         <!-- </a> -->
  416.                     <!-- </li> -->
  417.                 <!-- {% endif %} -->
  418.                 
  419.                 <!-- <li> -->
  420.                     <!-- <a href="" style="display: block;">  -->
  421.                         <!-- <img src="{{ asset('templatehome/images/logopartenaires.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  422.                         <!-- <strong>Markup HTML </strong></br> -->
  423.                         <!-- <div>Detail</div> -->
  424.                     <!-- </a> -->
  425.                 <!-- </li> -->
  426.                 
  427.                 <!-- <li> -->
  428.                     <!-- <a href="" style="display: block;">  -->
  429.                         <!-- <img src="{{ asset('templatehome/images/logopartenaires.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  430.                         <!-- <strong>Markup HTML </strong></br> -->
  431.                         <!-- <div>Detail</div> -->
  432.                     <!-- </a> -->
  433.                 <!-- </li> -->
  434.                 
  435.                 <!-- <li> -->
  436.                     <!-- <a href="" style="display: block;">  -->
  437.                         <!-- <img src="{{ asset('templatehome/images/logopartenaires.png') }}" alt="" style="width: 40px; border-radius: 500%; height: 40px; float: left; margin-right: 7px;"/> -->
  438.                         <!-- <strong>Markup HTML </strong></br> -->
  439.                         <!-- <div>Detail</div> -->
  440.                     <!-- </a> -->
  441.                 <!-- </li> -->
  442.                 
  443.               <!-- </ul> -->
  444.             <!-- </li> -->
  445.           <!-- </ul> -->
  446.         <!-- </div> -->
  447.         
  448.         <!-- <div id="protocol-nav-download-firefox" class="download-button mzp-c-button-download-container"> -->
  449.           <!-- <ul class="download-list"> -->
  450.               <!-- <li class="os_win644"> -->
  451.                 <!-- <a class="open-spp-modal download-link button mzp-t-secondary mzp-t-small mzp-c-button mzp-t-product" href="#!" data-direct-link="" data-link-type="download" data-display-name="Windows 64-bit" data-download-version="win64" data-download-os="Desktop" data-download-location="nav"> -->
  452.                   <!-- <strong class="download-title"> -->
  453.                     <!-- Investir sur un business -->
  454.                   <!-- </strong> -->
  455.                 <!-- </a> -->
  456.               <!-- </li> -->
  457.           <!-- </ul> -->
  458.         <!-- </div> -->
  459.         </div>
  461.        <div class="mzp-c-navigation-menu" style="margin-top: 10px;">
  462.        <nav class="mzp-c-menu mzp-is-enhanced">
  463.        <ul class="mzp-c-menu-category-list">
  464.        
  465.        {% for cat in liste_categorie|slice(0,2) %}
  466.            <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
  467.            <a class="mzp-c-menu-title" href="#!" aria-haspopup="true" aria-controls="mzp-c-menu-panel-firefox" aria-expanded="false">{{ cat.nom }}</a>
  468.            <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-projects">
  469.             <div class="mzp-c-menu-panel-container">
  470.               <button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-projects">Fermer le menu Projets</button>
  471.               <div class="mzp-c-menu-panel-content">
  472.                 <ul>
  473.                 {% set liste_scat = cat.getListeScat %}
  474.                 {% set typeProgramme = "programme" %}
  475.                 {% for scat in liste_scat|slice(0,2) %}
  476.                   <li>
  477.                     <section class="mzp-c-menu-item mzp-has-icon">
  478.                       <a class="mzp-c-menu-item-link" href="{{ path('produit_produit_listes_produit_user', {'id': scat.id}) }}" data-link-name="{{ scat.nom }}" data-link-type="nav" data-link-position="topnav" data-link-group="projects" style="padding-left: 0px;">
  479.                         <img src="{% if scat.src != null %}{{ asset(scat.getWebpath) }}{% else %}{{ asset('template/images/3plan.png') }}{% endif %}" style="width: 60px; float: left; margin-right: 7px; margin-left: 0px;"/>
  480.                         <h4 class="mzp-c-menu-item-title">{{ scat.nom }}</h4>
  481.                         <p class="mzp-c-menu-item-desc">{{ scat.description }}</p>
  482.                       </a>
  483.                     </section>
  484.                   </li>
  485.                   {% set typeProgramme = scat.typebusiness %}
  486.                  {% endfor %}
  487.                 </ul>
  488.                 <ul>
  489.                 {% for scat in liste_scat|slice(0,4) %}
  490.                   {% if loop.index > 2 %}
  491.                   <li>
  492.                     <section class="mzp-c-menu-item mzp-has-icon">
  493.                       <a class="mzp-c-menu-item-link" href="" data-link-name="{{ scat.nom }}" data-link-type="nav" data-link-position="topnav" data-link-group="projects">
  494.                         <img src="{% if scat.src != null %}{{ asset(scat.getWebpath) }}{% else %}{{ asset('template/images/3plan.png') }}{% endif %}" style="width: 60px; float: left; margin-right: 7px; margin-left: 0px;"/>
  495.                         <h4 class="mzp-c-menu-item-title">{{ scat.nom }}</h4>
  496.                         <p class="mzp-c-menu-item-desc">{{ scat.description }}</p>
  497.                       </a>
  498.                     </section>
  499.                   </li>
  500.                   {% endif %}
  501.                  {% endfor %}
  502.                 </ul>
  503.               </div>
  504.               <div class="mzp-c-menu-panel-card">
  505.                 <section class="mzp-c-card mzp-c-card-extra-small mzp-has-aspect-3-2">
  506.                   <a class="mzp-c-card-block-link" href="{{ path('produit_produit_listes_all_produit_type', {'type': typeProgramme }) }}" data-link-name="Mozilla WebVR" data-link-type="nav" data-link-position="card" data-link-group="projects">
  507.                     <div class="mzp-c-card-media-wrapper" style="height: 100px;">
  508.                       <img class="mzp-c-card-image" src="./Internet est un bien commun, nous le défendons. — Mozilla_files/placeholder.71a50dbba44c.png" data-src="https://www.mozilla.org/media/img/nav/cards/firefox-reality.7c9245a63776.png" alt="" style="height: 100px; width: 100%;">
  509.                     </div>
  510.                     <div class="mzp-c-card-content">
  511.                     <h2 class="mzp-c-card-title">{{ cat.nom }}</h2>
  512.                     <p class="mzp-c-card-desc">Tous les produits</p>
  513.                     </div>
  514.                   </a>
  515.                 </section>
  516.               </div>
  517.             </div><!-- close .mzp-c-menu-panel-container -->
  518.           </div><!-- close .mzp-c-menu-panel -->
  519.         </li><!-- close firefox -->
  520.     {% endfor %}
  521.     
  522.     <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
  523.         <a class="mzp-c-menu-title" href="" aria-haspopup="true" aria-controls="mzp-c-menu-panel-developers" aria-expanded="false">Investisseurs</a>
  524.         <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-developers">
  525.         <div class="mzp-c-menu-panel-container">
  526.         <button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-developers">Fermer le menu Développeurs</button>
  527.         <div class="mzp-c-menu-panel-content">
  528.         <ul>
  529.           <li>
  530.             <section class="mzp-c-menu-item mzp-has-icon">
  531.               <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  532.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d3157a6ac671.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  533.                 <h4 class="mzp-c-menu-item-title">Offres d'investissement en amorçage</h4>
  534.                 <p class="mzp-c-menu-item-desc">Firefox, conçu spécialement pour les développeurs.</p>
  535.               </a>
  536.             </section>
  537.           </li>
  538.           <li>
  539.             <section class="mzp-c-menu-item mzp-has-icon">
  540.               <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Beta" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  541.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d1b49e50ffb7.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  542.                 <h4 class="mzp-c-menu-item-title">Offres d'achat d'actions</h4>
  543.                 <p class="mzp-c-menu-item-desc">Testez les fonctionnalités sur le point d’être publiées en utilisant la préversion la plus stable.</p>
  544.               </a>
  545.             </section>
  546.           </li>
  547.             <li>
  548.               <section class="mzp-c-menu-item mzp-has-icon">
  549.                 <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Nightly" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  550.                   <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.751c5555e455.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  551.                   <h4 class="mzp-c-menu-item-title">Faire un don</h4>
  552.                   <p class="mzp-c-menu-item-desc">Contribuez à l'accroissement d'une entreprise en faisant un don</p>
  553.                 </a>
  554.               </section>
  555.             </li>
  556.         </ul>
  557.         <ul>
  558.           <li>
  559.             <section class="mzp-c-menu-item mzp-has-icon">
  560.               <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  561.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d3157a6ac671.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  562.                 <h4 class="mzp-c-menu-item-title">Rapports annuels des projets</h4>
  563.                 <p class="mzp-c-menu-item-desc">Firefox, conçu spécialement pour les développeurs.</p>
  564.               </a>
  565.             </section>
  566.           </li>
  567.           <li>
  568.             <section class="mzp-c-menu-item mzp-has-icon">
  569.               <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Beta" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  570.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d1b49e50ffb7.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  571.                 <h4 class="mzp-c-menu-item-title">Conditions générales d'investissements</h4>
  572.                 <p class="mzp-c-menu-item-desc">Testez les fonctionnalités sur le point d’être publiées en utilisant la préversion la plus stable.</p>
  573.               </a>
  574.             </section>
  575.           </li>
  576.           <li>
  577.               <section class="mzp-c-menu-item mzp-has-icon">
  578.                 <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Nightly" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  579.                   <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.751c5555e455.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  580.                   <h4 class="mzp-c-menu-item-title">La confidentialité sur votre investissement</h4>
  581.                   <p class="mzp-c-menu-item-desc">Découvrez en avant-première la plus récente version de Firefox et aidez-nous à l’améliorer.</p>
  582.                 </a>
  583.               </section>
  584.             </li>
  585.         </ul>
  586.         </div>
  587.         <div class="mzp-c-menu-panel-card">
  588.         <section class="mzp-c-card mzp-c-card-extra-small mzp-has-aspect-3-2">
  589.           <a class="mzp-c-card-block-link" href="/developer/" data-link-name="Firefox Developer Edition" data-link-type="nav" data-link-position="card" data-link-group="developers">
  590.             <div class="mzp-c-card-media-wrapper">
  591.               <img class="mzp-c-card-image" src="./Internet est un bien commun, nous le défendons. — Mozilla_files/placeholder.71a50dbba44c.png" data-src="loper-edition.1ca9855df008.jpg" data-srcset="eveloper-edition-high-res.c37d9eac0136.jpg" alt="">
  592.               <noscript>
  593.                 <img class="mzp-c-card-image" src="/nav/cards/developer-edition.1ca9855df008.jpg" alt="">
  594.               </noscript>
  595.             </div>
  596.             <div class="mzp-c-card-content">
  597.             <h2 class="mzp-c-card-title">Faire un don</h2>
  598.             <p class="mzp-c-card-desc">Contribuez à l'accroissement d'une entreprise en faisant un don</p>
  599.             </div>
  600.           </a>
  601.         </section>
  602.         </div>
  603.         </div><!-- close .mzp-c-menu-panel-container -->
  604.         </div><!-- close .mzp-c-menu-panel -->
  605.     </li><!-- close developers -->
  606.     
  608.     <li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable" style="float: right;">
  609.     <a class="mzp-c-menu-title" href="" aria-haspopup="true" aria-controls="mzp-c-menu-panel-about" aria-expanded="false">À propos</a>
  610.     <div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-about">
  611.     <div class="mzp-c-menu-panel-container">
  612.     <button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-about">Fermer le menu À propos</button>
  613.     <div class="mzp-c-menu-panel-content">
  614.         <ul>
  615.           <li>
  616.             <section class="mzp-c-menu-item mzp-has-icon">
  617.               <a class="mzp-c-menu-item-link" href="{{  path('produit_service_afh_sps', {'position': 'presentation'}) }}" data-link-name="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  618.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d3157a6ac671.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  619.                 <h4 class="mzp-c-menu-item-title">Présentation du projet</h4>
  620.                 <p class="mzp-c-menu-item-desc">Blog</p>
  621.               </a>
  622.             </section>
  623.           </li>
  624.           <li>
  625.             <section class="mzp-c-menu-item mzp-has-icon">
  626.               <a class="mzp-c-menu-item-link" href="{{  path('produit_service_afh_sps', {'position': 'blog'}) }}" data-link-name="Firefox Beta" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  627.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d1b49e50ffb7.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  628.                 <h4 class="mzp-c-menu-item-title">Le blog</h4>
  629.                 <p class="mzp-c-menu-item-desc">Testez les fonctionnalités sur le point d’être publiées en utilisant la préversion la plus stable.</p>
  630.               </a>
  631.             </section>
  632.           </li>
  633.           <li>
  634.               <section class="mzp-c-menu-item mzp-has-icon">
  635.                 <a class="mzp-c-menu-item-link" href="{{  path('produit_service_afh_sps', {'position': 'garantie'}) }}" data-link-name="Firefox Nightly" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  636.                   <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.751c5555e455.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  637.                   <h4 class="mzp-c-menu-item-title">Les garanties</h4>
  638.                   <p class="mzp-c-menu-item-desc">Découvrez en avant-première la plus récente version de Firefox et aidez-nous à l’améliorer.</p>
  639.                 </a>
  640.               </section>
  641.             </li>
  642.         </ul>
  643.         <ul>
  644.           <li>
  645.             <section class="mzp-c-menu-item mzp-has-icon">
  646.               <a class="mzp-c-menu-item-link" href="" data-link-name="Firefox Developer Edition" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  647.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d3157a6ac671.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  648.                 <h4 class="mzp-c-menu-item-title">Avis utilistateurs</h4>
  649.                 <p class="mzp-c-menu-item-desc">Firefox, conçu spécialement pour les développeurs.</p>
  650.               </a>
  651.             </section>
  652.           </li>
  653.           <li>
  654.             <section class="mzp-c-menu-item mzp-has-icon">
  655.               <a class="mzp-c-menu-item-link" href="{{  path('produit_service_afh_sps', {'position': 'aide'}) }}" data-link-name="Firefox Beta" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  656.                 <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.d1b49e50ffb7.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  657.                 <h4 class="mzp-c-menu-item-title">Centre d'aide</h4>
  658.                 <p class="mzp-c-menu-item-desc">Testez les fonctionnalités sur le point d’être publiées en utilisant la préversion la plus stable.</p>
  659.               </a>
  660.             </section>
  661.           </li>
  662.           <li>
  663.               <section class="mzp-c-menu-item mzp-has-icon">
  664.                 <a class="mzp-c-menu-item-link" href="{{  path('produit_service_afh_sps', {'position': 'faq'}) }}" data-link-name="Firefox Nightly" data-link-type="nav" data-link-position="topnav" data-link-group="developers">
  665.                   <img src="./Internet est un bien commun, nous le défendons. — Mozilla_files/logo-sm.751c5555e455.png" class="mzp-c-menu-item-icon" width="24" height="24" alt="">
  666.                   <h4 class="mzp-c-menu-item-title">Foire aux questions</h4>
  667.                   <p class="mzp-c-menu-item-desc">Découvrez en avant-première la plus récente version de Firefox et aidez-nous à l’améliorer.</p>
  668.                 </a>
  669.               </section>
  670.             </li>
  671.         </ul>
  672.     </div>
  673.     
  674.     <div class="mzp-c-menu-panel-card">
  675.     <section class="mzp-c-card mzp-c-card-extra-small mzp-has-aspect-3-2">
  676.       <a class="mzp-c-card-block-link" href="{{  path('produit_service_afh_sps') }}" data-link-name="Mozilla Manifesto" data-link-type="nav" data-link-position="card" data-link-group="about">
  677.         <div class="mzp-c-card-media-wrapper">
  678.           <img class="mzp-c-card-image" src="./Internet est un bien commun, nous le défendons. — Mozilla_files/placeholder.71a50dbba44c.png" data-src="https://www.mozilla.org/media/img/nav/cards/manifesto.97bc84fbcdf7.png" data-srcset="https://www.mozilla.org/media/img/nav/cards/manifesto-high-res.ff5ff6c2ec3c.png" alt="">
  679.           <noscript>
  680.             <img class="mzp-c-card-image" src="/cards/manifesto.97bc84fbcdf7.png" alt="">
  681.           </noscript>
  682.         </div>
  683.         <div class="mzp-c-card-content">
  684.         <h2 class="mzp-c-card-title">Centre de support</h2>
  685.         <p class="mzp-c-card-desc">Votre droit à la sécurité et à la vie privée sur Internet est fondamental, jamais facultatif.</p>
  686.         </div>
  687.       </a>
  688.     </section>
  689.     </div>
  690.     </div><!-- close .mzp-c-menu-panel-container -->
  691.     </div><!-- close .mzp-c-menu-panel -->
  692.     </li><!-- close about -->
  693.     </ul>
  694.     </nav>
  695.     </div><!-- close .mzp-c-navigation-menu -->
  697.     </div><!-- close .mzp-c-navigation-items -->
  698.     </div><!-- close .mzp-c-navigation-container -->
  699.     </div><!-- close .mzp-c-navigation-l-content -->
  700.     </div><!-- close .mzp-c-navigation -->
  701.     
  702.     
  703.     
  704.     <script type="text/javascript">
  705.     $(window).bind('scroll', function(){
  706.         var largeur = ($(window).width());
  707.         dimension = 150;
  708.         /*if (largeur < 768)
  709.         {
  710.             dimension = 800;
  711.         }*/
  712.         // The value of where the "scoll" is.
  713.         if($(window).scrollTop() > dimension){
  714.           $('.top-header-navigation').addClass('my-fixed-nav');
  715.         }else{
  716.           $('.top-header-navigation').removeClass('my-fixed-nav');
  717.         }
  718.     });
  720.     $(document).ready(function() {
  721.       "use strict";
  722.       $('.menu-client > ul > li:has( > ul)').addClass('menu-client-dropdown-icon');
  723.       $('.menu-client > ul > li > ul:not(:has(ul))').addClass('normal-sub');
  724.       $(".menu-client > ul").before("<a href=\"#\" class=\"menu-client-mobile\">&nbsp;</a>");
  725.       $(".menu-client > ul > li").hover(function(e) {
  726.         if ($(window).width() > 943) {
  727.           $(this).children("ul").stop(true, false).fadeToggle(150);
  728.           e.preventDefault();
  729.         }
  730.       });
  731.       $(".menu-client > ul > li").click(function() {
  732.         if ($(window).width() <= 943) {
  733.           $(this).children("ul").fadeToggle(150);
  734.         }
  735.       });
  736.       $(".menu-client-mobile").click(function(e) {
  737.         $(".menu-client > ul").toggleClass('show-on-mobile');
  738.         e.preventDefault();
  739.       });
  740.     });
  742.     $(window).resize(function() {
  743.       $(".menu-client > ul > li").children("ul").hide();
  744.       $(".menu-client > ul").removeClass('show-on-mobile');
  745.     });
  747.     </script>
  749.     {% else %}
  750.         {% if position == 'paneluser' %}
  751.             
  752.             <!-- Navbar -->
  753.               <nav class="effect-scroll-content main-header navbar navbar-expand-md navbar-light navbar-white">
  754.                 <div class="container">
  755.                   <button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  756.                     <span class="navbar-toggler-icon"></span>
  757.                   </button>
  759.                   <div class="collapse navbar-collapse order-3" id="navbarCollapse">
  760.                     <!-- Left navbar links -->
  761.                     <ul class="navbar-nav">
  762.                       <li class="nav-item">
  763.                         <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
  764.                       </li>
  765.                       
  766.                       <li class="nav-item">
  767.                         <a href="{{ path('users_user_acces_plateforme') }}" class="nav-link">Home</a>
  768.                       </li>
  769.                       
  770.                       <li class="nav-item">
  771.                         <a href="#" class="nav-link">Contact</a>
  772.                       </li>
  773.                       
  774.                       <li class="nav-item dropdown">
  775.                         <a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
  776.                         <ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
  777.                           <li><a href="#" class="dropdown-item">Some action </a></li>
  778.                           <li><a href="#" class="dropdown-item">Some other action</a></li>
  780.                           <li class="dropdown-divider"></li>
  782.                           <!-- Level two dropdown-->
  783.                           <li class="dropdown-submenu dropdown-hover">
  784.                             <a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
  785.                             <ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
  786.                               <li>
  787.                                 <a tabindex="-1" href="#" class="dropdown-item">level 2</a>
  788.                               </li>
  790.                               <!-- Level three dropdown-->
  791.                               <li class="dropdown-submenu">
  792.                                 <a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
  793.                                 <ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
  794.                                   <li><a href="#" class="dropdown-item">3rd level</a></li>
  795.                                   <li><a href="#" class="dropdown-item">3rd level</a></li>
  796.                                 </ul>
  797.                               </li>
  798.                               <!-- End Level three -->
  800.                               <li><a href="#" class="dropdown-item">level 2</a></li>
  801.                               <li><a href="#" class="dropdown-item">level 2</a></li>
  802.                             </ul>
  803.                           </li>
  804.                           <!-- End Level two -->
  805.                         </ul>
  806.                       </li>
  807.                     </ul>
  808.                   </div>
  810.                   <!-- Right navbar links -->
  811.                   <ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
  812.                     <!-- Messages Dropdown Menu -->
  813.                     <li class="nav-item dropdown">
  814.                       <a class="nav-link" data-toggle="dropdown" href="#">
  815.                         <i class="fas fa-comments"></i>
  816.                         <span class="badge badge-danger navbar-badge">3</span>
  817.                       </a>
  818.                       <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  819.                         <a href="#" class="dropdown-item">
  820.                           <!-- Message Start -->
  821.                           <div class="media">
  822.                             <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
  823.                             <div class="media-body">
  824.                               <h3 class="dropdown-item-title">
  825.                                 Brad Diesel
  826.                                 <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
  827.                               </h3>
  828.                               <p class="text-sm">Call me whenever you can...</p>
  829.                               <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  830.                             </div>
  831.                           </div>
  832.                           <!-- Message End -->
  833.                         </a>
  834.                         <div class="dropdown-divider"></div>
  835.                         <a href="#" class="dropdown-item">
  836.                           <!-- Message Start -->
  837.                           <div class="media">
  838.                             <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  839.                             <div class="media-body">
  840.                               <h3 class="dropdown-item-title">
  841.                                 John Pierce
  842.                                 <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
  843.                               </h3>
  844.                               <p class="text-sm">I got your message bro</p>
  845.                               <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  846.                             </div>
  847.                           </div>
  848.                           <!-- Message End -->
  849.                         </a>
  850.                         <div class="dropdown-divider"></div>
  851.                         <a href="#" class="dropdown-item">
  852.                           <!-- Message Start -->
  853.                           <div class="media">
  854.                             <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
  855.                             <div class="media-body">
  856.                               <h3 class="dropdown-item-title">
  857.                                 Nora Silvester
  858.                                 <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
  859.                               </h3>
  860.                               <p class="text-sm">The subject goes here</p>
  861.                               <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
  862.                             </div>
  863.                           </div>
  864.                           <!-- Message End -->
  865.                         </a>
  866.                         <div class="dropdown-divider"></div>
  867.                         <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
  868.                       </div>
  869.                     </li>
  870.                     <!-- Notifications Dropdown Menu -->
  871.                     <li class="nav-item dropdown">
  872.                       <a class="nav-link" data-toggle="dropdown" href="#">
  873.                         <i class="far fa-bell"></i>
  874.                         <span class="badge badge-warning navbar-badge">15</span>
  875.                       </a>
  876.                       <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  877.                         <span class="dropdown-header">15 Notifications</span>
  878.                         <div class="dropdown-divider"></div>
  879.                         <a href="#" class="dropdown-item">
  880.                           <i class="fas fa-envelope mr-2"></i> 4 new messages
  881.                           <span class="float-right text-muted text-sm">3 mins</span>
  882.                         </a>
  883.                         <div class="dropdown-divider"></div>
  884.                         <a href="#" class="dropdown-item">
  885.                           <i class="fas fa-users mr-2"></i> 8 friend requests
  886.                           <span class="float-right text-muted text-sm">12 hours</span>
  887.                         </a>
  888.                         <div class="dropdown-divider"></div>
  889.                         <a href="#" class="dropdown-item">
  890.                           <i class="fas fa-file mr-2"></i> 3 new reports
  891.                           <span class="float-right text-muted text-sm">2 days</span>
  892.                         </a>
  893.                         <div class="dropdown-divider"></div>
  894.                         <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
  895.                       </div>
  896.                     </li>
  897.                     <li class="nav-item">
  898.                       <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i
  899.                           class="fas fa-th-large"></i></a>
  900.                     </li>
  901.                   </ul>
  902.                 </div>
  903.               </nav>
  904.               <script type="text/javascript">
  905.                 $(window).bind('scroll', function(){
  906.                     var largeur = ($(window).width());
  907.                     dimension = 100;
  908.                     /*if (largeur < 768)
  909.                     {
  910.                         dimension = 800;
  911.                     }*/
  912.                     // The value of where the "scoll" is.
  913.                     if($(window).scrollTop() > dimension){
  914.                       $('.effect-scroll-content').addClass('my-fixed-nav');
  915.                     }else{
  916.                       $('.effect-scroll-content').removeClass('my-fixed-nav');
  917.                     }
  918.                 });
  919.               </script>
  920.               <!-- /.navbar -->
  921.         {% endif %}
  922.     {% endif %}
  923. {% endif %}