diff --git a/public/includes/components/nav.html b/public/includes/components/nav.html index 8e7619d..9a5b6de 100644 --- a/public/includes/components/nav.html +++ b/public/includes/components/nav.html @@ -8,8 +8,15 @@ @@ -99,6 +102,9 @@

Breng jouw sportevenement spectaculair in beeld met FPV actiebeelden op hoge snelheden en slechts centimeters van de actie verwijderd.

+

+ Lees meer +

@@ -113,6 +119,9 @@

Leg de grootsheid, sfeer en energie van elk evenement vast. Denk aan aftermovie's, festivals en bruiloften, tot privé- en bedrijfsfeesten.

+

+ Lees meer +

diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 56b43c0..8079b2b 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -43,12 +43,12 @@ $accordion-icon-width: 1rem; @import "bootstrap/scss/list-group"; @import "bootstrap/scss/transitions"; @import "bootstrap/scss/accordion"; +@import "bootstrap/scss/dropdown"; // @import "bootstrap/scss/alert"; // @import "bootstrap/scss/badge"; // @import "bootstrap/scss/breadcrumb"; // @import "bootstrap/scss/button-group"; // @import "bootstrap/scss/close"; -// @import "bootstrap/scss/dropdown"; // @import "bootstrap/scss/forms"; // @import "bootstrap/scss/modal"; // Requires transitions // @import "bootstrap/scss/offcanvas"; // Requires transitions @@ -254,6 +254,23 @@ body.is-scrolled .navbar { padding-bottom: var(--bs-nav-link-padding-y); } + .dropdown-menu { + border: none; + background-color: rgba(22, 23, 25, 0.95); + @extend .text-center; + } + + .dropdown-item { + color: var(--bs-navbar-color); + font-family: $ff-header; + + &:hover, + &:focus { + color: var(--bs-navbar-hover-color); + background-color: rgba(255, 255, 255, 0.08); + } + } + .socials { @extend .justify-content-center; } @@ -261,6 +278,10 @@ body.is-scrolled .navbar { // navbar-expand-lg @include media-breakpoint-up(lg) { + .dropdown-menu { + text-align: left; + } + .btn:not(.btn+.btn), .socials a:not(a+a) { margin-left: var(--bs-navbar-nav-link-padding-x);