nav-magento #2
Description
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 =
Demander un devis;
customLinks.appendChild(devisDiv);
// Prix renversants
const promoDiv = document.createElement("div");
promoDiv.className = "nav-item nav-renversant";
promoDiv.innerHTML =
Prix renversants
;
customLinks.appendChild(promoDiv);
// Écoresponsable
const ecoDiv = document.createElement("div");
ecoDiv.className = "nav-item nav-ecoresponsable";
ecoDiv.innerHTML =
É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>