diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index 8046968ebad..0d1774feb65 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -171,3 +171,17 @@ $o-btn-outline-defaults: () !default;
padding-right: 0;
}
}
+
+// Review bootstrap navbar to work with different nav styles
+$o-navbar-nav-pills-link-padding-x: $nav-link-padding-x !default;
+$o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
+.navbar-nav.nav-pills .nav-link {
+ // The rules is needed so that the padding is not reset to 0 in mobile.
+ // Also use default nav-link paddings instead of navbar ones.
+ padding-right: $o-navbar-nav-pills-link-padding-x;
+ padding-left: $o-navbar-nav-pills-link-padding-x;
+
+ @if $o-navbar-nav-pills-link-border-radius != $nav-pills-border-radius {
+ @include border-radius($o-navbar-nav-pills-link-border-radius);
+ }
+}
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index 6f20d0c4c20..e0191a7cf2e 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -10,6 +10,14 @@ $yiq-contrasted-threshold: false !default;
$yiq-text-dark: o-color('900') !default;
$yiq-text-light: o-color('white') !default;
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default; // Need to predefine as used below
+
// Body
//
// Settings for the `` element.
@@ -54,6 +62,13 @@ $headings-color: o-color('o-cc1-headings') !default;
$text-muted: mute-color($body-color) !default;
+// Navbar
+
+// Increase default navbar padding for some navbar styles
+$navbar-padding-y: if(index(('fill', 'pills', 'outline'), o-website-value('header-links-style')), ($spacer / 2) * 1.25, null) !default;
+$navbar-nav-link-padding-x: if(index(('outline', 'block'), o-website-value('header-links-style')), .5rem * 3, null) !default;
+$navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border-bottom', .5rem * 2, null) !default;
+
// Jumbotron
$jumbotron-bg: transparent !default;
@@ -66,3 +81,7 @@ $o-btn-outline-defaults: () !default;
$o-btn-outline-defaults: append($o-btn-outline-defaults, $color);
}
}
+
+// Increase default navbar pills padding for 'pills' mode and add big radius
+$o-navbar-nav-pills-link-padding-x: if(o-website-value('header-links-style') == 'pills', 1rem * 1.5, null) !default;
+$o-navbar-nav-pills-link-border-radius: if(o-website-value('header-links-style') == 'pills', 10rem, null) !default;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 96511e6472a..410538525d8 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -262,6 +262,7 @@ $o-base-website-values-palette: (
'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
'header-font-size': null, // Default to BS (normal font-size)
+ 'header-links-style': 'default', // 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'
'logo-height': null, // Default to navbar height (see portal)
'hamburger-type': 'default', // 'default' / 'off-canvas'
'hamburger-position': 'right', // 'right' / 'left' / 'center'
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 5e654dc2db4..17cb92bae1c 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -979,6 +979,54 @@ header {
}
}
+// Navbar Links Styles
+@if index(('block', 'border-bottom'), o-website-value('header-links-style')) {
+ @include media-breakpoint-up(md) {
+ .navbar {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+}
+.navbar-nav {
+ .nav-link {
+ @if o-website-value('header-links-style') == 'outline' {
+ // Need to force the padding in this case so that it stays in mobile
+ padding-right: $navbar-nav-link-padding-x;
+ padding-left: $navbar-nav-link-padding-x;
+ border: $border-width solid transparent;
+ @include border-radius($nav-pills-border-radius);
+ } @else if o-website-value('header-links-style') == 'block' {
+ // There is no way to control navbar links vertical padding in BS4
+ // independently from nav ones, just double them here instead
+ padding-top: $nav-link-padding-y * 2;
+ padding-bottom: $nav-link-padding-y * 2;
+ @include border-radius(0);
+ } @else if o-website-value('header-links-style') == 'border-bottom' {
+ // There is no way to control navbar links vertical padding in BS4
+ // independently from nav ones, just double them here instead
+ padding-top: ($nav-link-padding-y * 2);
+ padding-bottom: ($nav-link-padding-y * 2);
+ border-bottom: $nav-link-padding-y solid transparent;
+
+ // Replace horizontal paddings by margins (do this with an extra
+ // class to override .navbar-expand-* paddings priority).
+ .navbar & {
+ padding-left: 0;
+ padding-right: 0;
+ margin: 0 $navbar-nav-link-padding-x;
+ }
+ }
+ }
+
+ @if index(('outline', 'border-bottom'), o-website-value('header-links-style')) {
+ .nav-link.active,
+ .show > .nav-link {
+ border-color: currentColor;
+ }
+ }
+}
+
// Footer Templates
#footer {
@if o-website-value('footer-template') != 'products_contacts_about_us' {
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 3265f9f79ff..3969ee27444 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -629,6 +629,27 @@
string="Fade Out"/>
+
+ Default
+ Fill
+ Outline
+ Pills
+ Block
+ Border Bottom
+
+