Rebuild navber with new BS4 Beta functions

This commit is contained in:
koenemann 2017-08-17 11:27:11 +02:00
parent 776a76057f
commit e7a2e203e2
5 changed files with 79 additions and 126 deletions

View File

@ -6743,60 +6743,38 @@ a.skip-link {
.jumbotron {
margin-bottom: 0px; }
.menu-item {
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;
.navbar-dark .navbar-nav .dropdown-menu .nav-link {
display: block;
margin-left: 10px;
border: none;
box-shadow: none; }
.dropdown-menu .dropdown-menu li {
padding-left: 0px;
list-style: square; }
.dropdown-menu .menu-item {
width: 100%; }
.dropdown-menu .menu-item a.nav-link:hover {
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: normal;
color: #212529 !important;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0; }
.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,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer; }
.navbar-light .navbar-brand a {
color: rgba(0, 0, 0, 0.9); }
.navbar-light .navbar-brand a:focus, .navbar-light .navbar-brand a:hover {
color: rgba(0, 0, 0, 0.9); }
.gallery:after {
content: "";
display: table;
clear: both; }
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; }
.navbar-dark .navbar-brand a {
color: white; }
.navbar-dark .navbar-brand a:focus, .navbar-dark .navbar-brand a:hover {
color: white; }
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome

2
css/theme.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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(

View File

@ -64,80 +64,55 @@ a.skip-link {
// Reset Jumbotron default margin
.jumbotron { margin-bottom: 0px; }
// Bootstrap3 to Bootstrap4 "translation"
.menu-item {
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;
// Dropdown translation
.navbar-dark .navbar-nav .dropdown-menu .nav-link{
display: block;
margin-left: 10px;
border: none;
box-shadow: none;
li {
padding-left: 0px;
list-style: square;
width: 100%; // For `<button>`s
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
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
@include hover-focus {
color: $dropdown-link-hover-color !important;
text-decoration: none;
background-color: $dropdown-link-hover-bg;
}
&.active,
&:active {
color: $dropdown-link-active-color !important;
text-decoration: none;
background-color: $dropdown-link-active-bg;
}
&.disabled,
&:disabled {
color: $dropdown-link-disabled-color !important;
background-color: transparent;
// Remove CSS gradients if they're enabled
@if $enable-gradients {
background-image: none;
}
}
}
.dropdown-menu .menu-item {
width: 100%;
a.nav-link{
.navbar-light .navbar-brand a {
color: $navbar-light-active-color;
}
a.nav-link:hover {
background-color: theme-color("primary");
}
@include hover-focus {
color: $navbar-light-active-color;
}
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
.navbar-dark .navbar-brand a {
color: $navbar-dark-active-color;
@include hover-focus {
color: $navbar-dark-active-color;
}
}
// Clearing after gallery
.gallery:after {
content: "";
display: table;
clear: both;
}
// Clearing after widget
aside.widget{clear:both;}
// Makes widgets in hero slider 100% width
#wrapper-hero .carousel-inner .textwidget {
width:100%;
}
// Adjusting brand link if h1 is used
h1.navbar-brand {
a {
color:inherit;
}
a:hover {
text-decoration:none;
}
}