rayelliott
/
understrap
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
css/theme.css
View File

@ -6743,60 +6743,38 @@ a.skip-link {
.jumbotron { .jumbotron {
margin-bottom: 0px; } 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; 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; } 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 * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome

2
css/theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/theme.min.css.map
View File

File diff suppressed because one or more lines are too long

10
header.php
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', <a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a> '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 ) : ?> <?php if ( 'container' == $container ) : ?>
<div class="container"> <div class="container">
<?php endif; ?> <?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 --> <!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?> <?php if ( ! has_custom_logo() ) { ?>
@ -57,10 +61,6 @@ $container = get_theme_mod( 'understrap_container_type' );
the_custom_logo(); the_custom_logo();
} ?><!-- end 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 --> <!-- The WordPress Menu goes here -->
<?php wp_nav_menu( <?php wp_nav_menu(
array( array(

113
sass/understrap/understrap.scss
View File

@ -64,80 +64,55 @@ a.skip-link {
// Reset Jumbotron default margin // Reset Jumbotron default margin
.jumbotron { margin-bottom: 0px; } .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; display: block;
margin-left: 10px; width: 100%; // For `<button>`s
border: none; padding: $dropdown-item-padding-y $dropdown-item-padding-x;
box-shadow: none; clear: both;
li { font-weight: $font-weight-normal;
padding-left: 0px; color: $dropdown-link-color !important;
list-style: square; 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 { .navbar-light .navbar-brand a {
width: 100%; color: $navbar-light-active-color;
a.nav-link{
} @include hover-focus {
a.nav-link:hover { color: $navbar-light-active-color;
background-color: theme-color("primary"); }
}
} }
button, .navbar-dark .navbar-brand a {
[type="button"], color: $navbar-dark-active-color;
[type="reset"],
[type="submit"] { @include hover-focus {
cursor: pointer; 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;
}
}