fix: header container size

italia · Nov 4, 2024 · 86c4b9b · 86c4b9b
1 parent 0be94ff
commit 86c4b9b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/docs/menu-di-navigazione/header.md b/docs/menu-di-navigazione/header.md
@@ -49,7 +49,7 @@ Il cambio lingua è gestito con il componente [dropdown]({{ site.baseurl }}/docs
 {% comment %}Example name: Slim header{% endcomment %}
 {% capture example %}
 <div class="it-header-slim-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-slim-wrapper-content">
@@ -109,7 +109,7 @@ Il modificatore `.btn-full` è disponibile anche con il tema chiaro attivato da
 {% comment %}Example name: Slim header con pulsante accedi full-responsive{% endcomment %}
 {% capture example %}
 <div class="it-header-slim-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-slim-wrapper-content">
@@ -157,7 +157,7 @@ Per cambiare tema all'header slim è sufficiente aggiungere la classe `theme-lig
 {% comment %}Example name: Slim header, variante chiara{% endcomment %}
 {% capture example %}
 <div class="it-header-slim-wrapper theme-light">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-slim-wrapper-content">
@@ -214,7 +214,7 @@ Per cambiare tema all'header slim è sufficiente aggiungere la classe `theme-lig
 {% comment %}Example name: Header centrale{% endcomment %}
 {% capture example %}
 <div class="it-header-center-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-center-content-wrapper">
@@ -279,7 +279,7 @@ Per utilizzare la versione più compatta in verticale dell'header centrale è su
 {% comment %}Example name: Header centrale, variante compatta{% endcomment %}
 {% capture example %}
 <div class="it-header-center-wrapper it-small-header">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-center-content-wrapper">
@@ -344,7 +344,7 @@ Per cambiare tema all'header centrale è sufficiente aggiungere la classe `theme
 {% comment %}Example name: Header centrale, variante chiara{% endcomment %}
 {% capture example %}
 <div class="it-header-center-wrapper theme-light">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <div class="it-header-center-content-wrapper">
@@ -409,7 +409,7 @@ Per cambiare tema all'header centrale è sufficiente aggiungere la classe `theme
 {% comment %}Example name: Header navigazione{% endcomment %}
 {% capture example %}
 <div class="it-header-navbar-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <!--start nav-->
@@ -560,7 +560,7 @@ Per modificare il tema dell'Header Nav è sufficiente aggiungere una o tutte e d
 {% comment %}Example name: Header navigazione standard{% endcomment %}
 {% capture example %}
 <div class="it-header-navbar-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <!--start nav-->
@@ -699,7 +699,7 @@ Per modificare il tema dell'Header Nav è sufficiente aggiungere una o tutte e d
 {% comment %}Example name: Header navigazione mobile scura{% endcomment %}
 {% capture example %}
 <div class="it-header-navbar-wrapper theme-dark-mobile">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <!--start nav-->
@@ -838,7 +838,7 @@ Per modificare il tema dell'Header Nav è sufficiente aggiungere una o tutte e d
 {% comment %}Example name: Header navigazione desktop chiara{% endcomment %}
 {% capture example %}
 <div class="it-header-navbar-wrapper theme-light-desk">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <!--start nav-->
@@ -981,7 +981,7 @@ Al menu di navigazione principale può essere aggiunto anche un menu di navigazi
 {% comment %}Example name: Header navigazione secondaria{% endcomment %}
 {% capture example %}
 <div class="it-header-navbar-wrapper">
-  <div class="container">
+  <div class="container-xxl">
     <div class="row">
       <div class="col-12">
         <!--start nav-->
@@ -1025,7 +1025,7 @@ Al menu di navigazione principale può essere aggiunto anche un menu di navigazi
 {% capture example %}
 <header class="it-header-wrapper">
   <div class="it-header-slim-wrapper">
-    <div class="container">
+    <div class="container-xxl">
       <div class="row">
         <div class="col-12">
           <div class="it-header-slim-wrapper-content">
@@ -1075,7 +1075,7 @@ Al menu di navigazione principale può essere aggiunto anche un menu di navigazi
   </div>
   <div class="it-nav-wrapper">
     <div class="it-header-center-wrapper">
-      <div class="container">
+      <div class="container-xxl">
         <div class="row">
           <div class="col-12">
             <div class="it-header-center-content-wrapper">
@@ -1122,7 +1122,7 @@ Al menu di navigazione principale può essere aggiunto anche un menu di navigazi
       </div>
     </div>
     <div class="it-header-navbar-wrapper">
-      <div class="container">
+      <div class="container-xxl">
         <div class="row">
           <div class="col-12">
             <!--start nav-->
@@ -1274,7 +1274,7 @@ Verrà creata un'ombra per enfatizzare l'Header rispetto alla pagina in cui è c
 {% capture example %}
 <header class="it-header-wrapper it-shadow">
   <div class="it-header-slim-wrapper theme-light">
-    <div class="container">
+    <div class="container-xxl">
       <div class="row">
         <div class="col-12">
           <div class="it-header-slim-wrapper-content">
@@ -1324,7 +1324,7 @@ Verrà creata un'ombra per enfatizzare l'Header rispetto alla pagina in cui è c
   </div>
   <div class="it-nav-wrapper">
     <div class="it-header-center-wrapper theme-light">
-      <div class="container">
+      <div class="container-xxl">
         <div class="row">
           <div class="col-12">
             <div class="it-header-center-content-wrapper">
@@ -1371,7 +1371,7 @@ Verrà creata un'ombra per enfatizzare l'Header rispetto alla pagina in cui è c
       </div>
     </div>
     <div class="it-header-navbar-wrapper theme-light-desk">
-      <div class="container">
+      <div class="container-xxl">
         <div class="row">
           <div class="col-12">
             <!--start nav-->

diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss
@@ -4,24 +4,28 @@
 .it-header-wrapper {
   position: relative;
   z-index: 5;
+
   .it-nav-wrapper {
     position: relative;
     z-index: auto;
+
     // se ha un menu
     .it-brand-wrapper {
       padding-left: $v-gap * 4;
     }
+
     .it-header-navbar-wrapper {
       transition: padding-top 0.3s ease;
-
       position: absolute;
       z-index: 3;
       left: 0;
       top: 50%;
       margin-top: -$header-nav-button-distance;
+
       nav {
         padding-left: $header-general-padding - ($grid-columns * 0.5);
         padding-right: $header-general-padding - ($grid-columns * 0.5);
+
         .custom-navbar-toggler {
           padding: 0;
           transform: translateX(-2px);
@@ -34,6 +38,7 @@
   &.it-header-sticky {
     &.is-sticky {
       width: 100%;
+
       .it-nav-wrapper {
         //position: fixed;
         top: 0;
@@ -46,6 +51,7 @@
       }
 
       @include media-breakpoint-up(lg) {
+
         .it-header-slim-wrapper,
         .it-header-center-wrapper {
           display: none;
@@ -72,9 +78,11 @@
 
                 a {
                   color: $header-center-text-color;
+
                   &:hover {
                     text-decoration: none;
                   }
+
                   .icon {
                     fill: $header-center-text-color;
                     width: $header-center-icon-size * 0.5;
@@ -93,6 +101,7 @@
               margin-left: math.div($header-center-search-distance, 3);
               font-size: $header-center-text-size;
               color: $header-center-text-color;
+
               a {
                 &.rounded-icon {
                   width: $header-center-search-size;
@@ -104,9 +113,11 @@
                   align-items: center;
                   margin-left: $v-gap * 2;
                   transition: all 0.3s;
+
                   &:hover {
                     background: shade-color($header-center-text-color, 5%);
                   }
+
                   svg {
                     fill: $header-center-bg-color;
                     width: $header-center-search-icon-size;
@@ -150,21 +161,25 @@
       .it-brand-wrapper {
         padding-left: 0;
       }
+
       position: relative;
+
       .it-header-navbar-wrapper {
         position: inherit;
         left: auto;
         top: inherit;
         margin-top: 0;
+
         nav {
           padding-left: $header-general-padding - ($grid-columns * 0.5);
           padding-right: $header-general-padding - ($grid-columns * 0.5);
         }
       }
     }
+
     .navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu {
       left: 0;
       right: 0;
     }
   }
-}
+}