Rebuild navber with new BS4 Beta functions
This commit is contained in:
koenemann
parent
776a76057f
commit
e7a2e203e2
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
10
header.php
10
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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
// 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;
|
||||
}
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
Reference in New Issue