Rebuild navber with new BS4 Beta functions

css/theme.css

@@ -6743,60 +6743,38 @@ a.skip-link {
 .jumbotron {
   margin-bottom: 0px; }
 
-.menu-item {
+.navbar-dark .navbar-nav .dropdown-menu .nav-link {
-  float: left;
-  display: inline;
-  width: auto; }
-
-.bg-primary .dropdown-menu {
-  background-color: #007bff; }
-
-.bg-success .dropdown-menu {
-  background-color: #28a745; }
-
-.bg-inverse .dropdown-menu {
-  background-color: rgba(255, 255, 255, 0.5); }
-
-.navbar-toggleable-md .navbar-nav .dropdown-menu {
-  float: left; }
-
-.dropdown-menu .dropdown-menu {
-  position: relative;
   display: block;
-  margin-left: 10px;
+  width: 100%;
-  border: none;
+  padding: 0.25rem 1.5rem;
-  box-shadow: none; }
+  clear: both;
-  .dropdown-menu .dropdown-menu li {
+  font-weight: normal;
-    padding-left: 0px;
+  color: #212529 !important;
-    list-style: square; }
+  text-align: inherit;
-
+  white-space: nowrap;
-.dropdown-menu .menu-item {
+  background: none;
-  width: 100%; }
+  border: 0; }
-  .dropdown-menu .menu-item a.nav-link:hover {
+  .navbar-dark .navbar-nav .dropdown-menu .nav-link:focus, .navbar-dark .navbar-nav .dropdown-menu .nav-link:hover {
+    color: #16181b !important;
+    text-decoration: none;
+    background-color: #f8f9fa; }
+  .navbar-dark .navbar-nav .dropdown-menu .nav-link.active, .navbar-dark .navbar-nav .dropdown-menu .nav-link:active {
+    color: #fff !important;
+    text-decoration: none;
     background-color: #007bff; }
+  .navbar-dark .navbar-nav .dropdown-menu .nav-link.disabled, .navbar-dark .navbar-nav .dropdown-menu .nav-link:disabled {
+    color: #868e96 !important;
+    background-color: transparent; }
 
-button,
+.navbar-light .navbar-brand a {
-[type="button"],
+  color: rgba(0, 0, 0, 0.9); }
-[type="reset"],
+  .navbar-light .navbar-brand a:focus, .navbar-light .navbar-brand a:hover {
-[type="submit"] {
+    color: rgba(0, 0, 0, 0.9); }
-  cursor: pointer; }
 
-.gallery:after {
+.navbar-dark .navbar-brand a {
-  content: "";
+  color: white; }
-  display: table;
+  .navbar-dark .navbar-brand a:focus, .navbar-dark .navbar-brand a:hover {
-  clear: both; }
+    color: white; }
-
-aside.widget {
-  clear: both; }
-
-#wrapper-hero .carousel-inner .textwidget {
-  width: 100%; }
-
-h1.navbar-brand a {
-  color: inherit; }
-
-h1.navbar-brand a:hover {
-  text-decoration: none; }
 
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome

header.php

@@ -33,12 +33,16 @@ $container = get_theme_mod( 'understrap_container_type' );
 		<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
 		'understrap' ); ?></a>
 
-		<nav class="navbar navbar-toggleable-md  navbar-inverse bg-inverse">
+		<nav class="navbar navbar-expand-md navbar-dark bg-dark">
 
 		<?php if ( 'container' == $container ) : ?>
 			<div class="container">
 		<?php endif; ?>
 
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+
 					<!-- Your site title as branding in the menu -->
 					<?php if ( ! has_custom_logo() ) { ?>
 
@@ -57,10 +61,6 @@ $container = get_theme_mod( 'understrap_container_type' );
 						the_custom_logo();
 					} ?><!-- end custom logo -->
 
-				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-					<span class="navbar-toggler-icon"></span>
-				</button>
-
 				<!-- The WordPress Menu goes here -->
 				<?php wp_nav_menu(
 					array(

sass/understrap/understrap.scss

@@ -64,80 +64,55 @@ a.skip-link {
 // Reset Jumbotron default margin
 .jumbotron { margin-bottom: 0px; }
 
-// Bootstrap3 to Bootstrap4 "translation"
+// Dropdown translation
-.menu-item {
+.navbar-dark .navbar-nav .dropdown-menu .nav-link{
-  float: left;
-  display: inline;
-  width: auto;
-}
-
-.bg-primary .dropdown-menu {
-background-color:theme-color("primary");
-}
-
-.bg-success .dropdown-menu {
-background-color:theme-color("success");
-}
-
-.bg-inverse .dropdown-menu {
-background-color:$navbar-dark-color;
-}
-
-// Fixing BS dropdown in a dropdown
-.navbar-toggleable-md .navbar-nav .dropdown-menu {
-  float:left;
-}
-
-.dropdown-menu .dropdown-menu {
-  position: relative;
   display: block;
-  margin-left: 10px;
+  width: 100%; // For `<button>`s
-  border: none;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  box-shadow: none;
-  li {
-    padding-left: 0px;
-    list-style: square;
-  }
-}
-
-.dropdown-menu .menu-item {
-  width: 100%;
-  a.nav-link{
-
-  }
-  a.nav-link:hover { 
-    background-color: theme-color("primary"); 
-  }
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  cursor: pointer;
-}
-
-// Clearing after gallery
-.gallery:after {
- content: "";
- display: table;
   clear: both;
-}
+  font-weight: $font-weight-normal;
+  color: $dropdown-link-color !important;
+  text-align: inherit; // For `<button>`s
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background: none; // For `<button>`s
+  border: 0; // For `<button>`s
 
-// Clearing after widget
+  @include hover-focus {
-aside.widget{clear:both;}
+    color: $dropdown-link-hover-color !important;
-
+    text-decoration: none;
-// Makes widgets in hero slider 100% width
+    background-color: $dropdown-link-hover-bg;
-#wrapper-hero .carousel-inner .textwidget {
+  }
-width:100%;
+
-}
+  &.active,
-
+  &:active {
-// Adjusting brand link if h1 is used
+    color: $dropdown-link-active-color !important;
-h1.navbar-brand {
+    text-decoration: none;
-  a {
+    background-color: $dropdown-link-active-bg;
-  color:inherit;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color !important;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
     }
-  a:hover {
+  }
-    text-decoration:none;
+}
+
+.navbar-light .navbar-brand a {
+     color: $navbar-light-active-color;
+
+    @include hover-focus {
+      color: $navbar-light-active-color;
+    }
+}
+
+.navbar-dark .navbar-brand a {
+    color: $navbar-dark-active-color;
+
+    @include hover-focus {
+      color: $navbar-dark-active-color;
     }
 }