Skip to content

nav-magento #2

Description

@Sombath34500

voici les codes que j'ai entrés dans magento dans la section "en tete html" puis "script et feuilles de style" :

<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "WebSite", "name": "france-collectivites", "url": "https://www.france-collectivites.fr/", "potentialAction": { "@type": "SearchAction", "target": "https://www.france-collectivites.fr/search?q={search_term_string}", "query-input": "required name=search_term_string" } } </script> <script> setTimeout(function() { jQuery('tr.grand.totals.incl span.price').html( jQuery('tr.grand.totals.incl span.price').html().replace('HT', 'TTC') ); }, 10000); </script> <script> (function (c, s, q, u, a, r, e) { c.hj=c.hj||function(){(c.hj.q=c.hj.q||[]).push(arguments)}; c._hjSettings = { hjid: a }; r = s.getElementsByTagName('head')[0]; e = s.createElement('script'); e.async = true; e.src = q + c._hjSettings.hjid + u; r.appendChild(e); })(window, document, 'https://static.hj.contentsquare.net/c/csq-', '.js', 5230637); </script> <script> document.addEventListener("DOMContentLoaded", function () { const navSections = document.querySelector(".sections.nav-sections"); if (navSections) { // Création du conteneur global const customLinks = document.createElement("div"); customLinks.className = "nav-custom-links"; // Qui sommes-nous ? const aboutDiv = document.createElement("div"); aboutDiv.className = "nav-item nav-about"; aboutDiv.innerHTML = Qui sommes-nous ?; customLinks.appendChild(aboutDiv); // Blog const blogDiv = document.createElement("div"); blogDiv.className = "nav-item nav-blog"; blogDiv.innerHTML = Blog; customLinks.appendChild(blogDiv); // Demander un devis const devisDiv = document.createElement("div"); devisDiv.className = "nav-item nav-devis"; devisDiv.innerHTML = devisDemander un devis; customLinks.appendChild(devisDiv); // Prix renversants const promoDiv = document.createElement("div"); promoDiv.className = "nav-item nav-renversant"; promoDiv.innerHTML = prix-renversants Prix renversants ; customLinks.appendChild(promoDiv); // Écoresponsable const ecoDiv = document.createElement("div"); ecoDiv.className = "nav-item nav-ecoresponsable"; ecoDiv.innerHTML = ecoresponsable Écoresponsable ; customLinks.appendChild(ecoDiv); // Insertion dans le menu navSections.appendChild(customLinks); } }); </script> <style> .slick-slider .slick-prev, .slick-slider .slick-next { border-radius: .3rem; background: #449DD1; } .slick-slider .slick-prev:hover, .slick-slider .slick-next:hover { background: #344768; } .pagebuilder-button-primary { background-color: #c63649 !important; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5); } .pagebuilder-button-primary:hover { background-color: #a32b3a; transform: translateY(-3px); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); text-decoration: none; } .breadcrumbs li.home a { position: relative; padding-left: 24px; font-size: large; font-weight: bold; } .breadcrumbs li.home a::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background-image: url('/media/catalog/category/Pictogrammes/accueil.png'); background-size: contain; background-repeat: no-repeat; } .nav-sections { max-width: 100%; background: transparent !important; height: 55px; position: relative; margin-bottom: 15px !important; } .header-menu-general-links { justify-content: left !important; } .level-top { color: #ffff !important; } .all-product-link { left: 405px; color: #212529 !important; font-weight: bold; } .nav-custom-links { display: flex; gap: 20px; align-items: center; margin-left: auto; position: absolute; bottom: 11px; left: 700px; z-index: 99; } .nav-item a { display: inline-flex; align-items: center; gap: 8px; background: transparent; font-weight: 600; font-size: 15px; text-decoration: none; border: none; padding: 6px 10px; transition: color 0.2s ease; } /* Icônes */ .nav-item img { display: inline-block; vertical-align: middle; } .btn-devis { color: #ffff !important; } /* Couleurs personnalisées */ .nav-ecoresponsable a { color: #00BF63; } .nav-ecoresponsable a:hover { color: #00994c; } .nav-renversant a { color: #C63649; } .nav-renversant a:hover { color: #a8293b; } .nav-blog a, .nav-about a, .nav-devis a { color: #212529; } .nav-devis { background: #449DD1; border-radius: 12px; transition: all 0.7s ease; } .nav-blog a:hover, .nav-about a:hover { color: #449DD1; } .nav-devis a:hover { color: #000; background-color: #327bad; /* plus foncé */ transform: scale(1.03); /* léger zoom */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* petite ombre */ border-radius: 12px; } #header-menu-all-product { background: #449DD1 !important; } @media (min-width: 1181px) { .all-product-link { left: 120px; } .nav-custom-links { left: 315px; } } @media (min-width: 1440px) { .all-product-link { left: 200px; } .nav-custom-links { left: 450px; } } @media (min-width: 1900px) { .all-product-link { left: 405px; } .nav-custom-links { left: 700px; } } @media (max-width: 1180px) { .nav-sections { position: fixed; padding-left: 0; padding-right: 0; } .navigation { margin-top: -25px; } .nav-custom-links { display: none; } } } @media (max-width: 768px) { .pagebuilder-slider { margin: 0; } } </style>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions