Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: header container size #1256

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: header container size #1256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
097d0e6
feat: beautify code
zetareticoli Oct 18, 2024
5aed9cc
fix: trailing space
zetareticoli Oct 18, 2024
0cfc9ab
fix: change container class
zetareticoli Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions docs/menu-di-navigazione/header.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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-->
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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-->
Expand Down
19 changes: 17 additions & 2 deletions src/scss/custom/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -34,6 +38,7 @@
&.it-header-sticky {
&.is-sticky {
width: 100%;

.it-nav-wrapper {
//position: fixed;
top: 0;
Expand All @@ -46,6 +51,7 @@
}

@include media-breakpoint-up(lg) {

.it-header-slim-wrapper,
.it-header-center-wrapper {
display: none;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
}
}
Loading