Bootstrap 4 Split Navbar - Responsive Dropdown Below not Beside - html

I have a navbar with a split dropdown. The particular portion of the HTML I'm interested in is this:
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
And the entire navbar looks like this:
<nav class="navbar navbar-toggleable-sm fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down"> BBA(Dist.), JD</small></a>
<div class="navbar-collapse collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#law">Law</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#media">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more">
<a class="dropdown-item" href="#miscinfo">More About Me</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header"><em>New Tab / Window</em></div>
<a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">Curriculum Vitae</a>
<a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">Resources for Lawyers</a>
</div>
</li>
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
<li class="nav-item btn btn-danger btn-sm">
<a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-B-b-a-dist-j-d.shtml" target="_blank">Get in Touch<span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
The result is something like this in small screens:
Having a split link in a navbar is a bit hacky to begin with, but notwithstanding that, I'm wondering if anyone knows a way to get the dropdown to pop back "in line" so that it looks more like the "More" dropdown:
?
Thanks in advance! :)


Just add container class in the btn-group div.
The misalignment is because of the btn-group class is defined as flex item. Try adding container class, it may solve the issue.
<div class="container p-0 btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>


The HTML below works when you expand a collapsed navbar!
Bootstrap: 5.0.0-beta2
<li class="nav-item col-6 col-md-auto">
<!-- NOTE: d-table on the group and nav-link d-inline for the inner <a> tags is a must for split button to work properly when collapsed/expanded -->
<div class="btn-group d-table nav-link p-2">
<a class="nav-link d-inline">Dropdown link</a>
<a class="nav-link d-inline" role="button" data-bs-toggle="dropdown">
<i class="far fa-caret-square-down"></i>
</a>
<ul class="dropdown-menu ">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</li>


I guess this isn't a very clean answer but I added some margin and it does the job. But can't wait to see a better solution.
#media (max-width: 992px) {
.dropdown-menu {
margin:35px 0 0 -150px;
}
}

Related

make dropdowns next to each other in bootstrap nav-bar

I have trouble to using nav-bar Bootstrap I'm trying to put two dropdowns next to each other on lift side of view port,
the bootstrap I'm using is rtl,
I got such navbar bootstrap like this :
<nav class="navbar fixed-top navbar-expand-sm navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav float-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</ul>
<div class="bg-danger flex-row">
<ul class="navbar-nav">
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
i want two dropdowns with .bg-danger links goes to each other ... How i should do it ??

here is the html code, put both <li> into single <ul>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav float-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
</ul>
<div class="bg-danger flex-row">
<ul class="navbar-nav">
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Let me know if you face any issue.

How can I make my Bootstrap 4 navbar dropdown full width?

I am trying to get a full-width dropdown on a bootstrap 4 navbar. I am using a standard boot4 Navbar.
This is the navbar I am using
Here is how I need it to look :
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Portfolio
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
<a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right show" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>
</ul>
</div>
</div>

Replace your class container with container-fluid
Delete ml-auto from navbar-nav

Issue with Double Row Bootstrap 4 Navbar

I have been trying to create two bootstrap navbars. The first has the website domain name in the center, with a dropdown menu to go to other sections. Then each section has it's own subbar with it's own links.
It currently looks like this.
Which is great and just how I want it. However when I click the dropdown on the brand name, it gets pushed to the left and overlapped with the other navbar.
I also want to bring my theme selector and user profile dropdown to the top nav bar, aligned to the right of the screen. But everytime I try it just ruins the top nav bar and the user profile dropdown gets same overlap issue.
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>

added
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
to bring it in the center. By default bootstrap has left:0 so t shows at the left side of a.
z-index: 9999 because navbar with sticky-top class has z-index: 1020;
https://codepen.io/Xenio/pen/LqmamQ888
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>

Selecting class using css doesn't work

I am trying to change the color of the nav-link to white when hovering.
Using this doesn't work:
.nav-link:hover{ color:white; }
<nav class="navbar navbar-toggleable-lg fixed-top navbar-inverse">
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<!-- You need this DIV for alignment -->
<a class="navbar-brand"
href="../index.php">d</a>
<div class="collapse navbar-collapse"
id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto scrollable-navmenu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active"
href="#"
id="dropdown01"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">MD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown01">
<a class="dropdown-item active"
href="#">
MD2 <span class="sr-only">(current)</span>
</a>
<a class="dropdown-item"
href="../md4">MD4</a>
<a class="dropdown-item"
href="../md5">MD5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown02"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">SHA</a>
<div class="dropdown-menu"
aria-labelledby="dropdown02">
<a class="dropdown-item"
href="../sha1">SHA1</a>
<a class="dropdown-item"
href="../sha256">SHA256</a>
<a class="dropdown-item"
href="../sha384">SHA384</a>
<a class="dropdown-item"
href="../sha512">SHA512</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown03"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">RIPEMD</a>
<div class="dropdown-menu"
aria-labelledby="dropdown03">
<a class="dropdown-item"
href="../ripemd128">RIPEMD128</a>
<a class="dropdown-item"
href="../ripemd160">RIPEMD160</a>
<a class="dropdown-item"
href="../ripemd256">RIPEMD256</a>
<a class="dropdown-item"
href="../ripemd320">RIPEMD320</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../whirlpool">Whirlpool</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown04"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Tiger</a>
<div class="dropdown-menu"
aria-labelledby="dropdown04">
<a class="dropdown-item"
href="../tiger128,3">Tiger128,3</a>
<a class="dropdown-item"
href="../tiger160,3">Tiger160,3</a>
<a class="dropdown-item"
href="../tiger192,3">Tiger192,3</a>
<a class="dropdown-item"
href="../tiger128,4">Tiger128,4</a>
<a class="dropdown-item"
href="../tiger160,4">Tiger160,4</a>
<a class="dropdown-item"
href="../tiger192,4">Tiger192,4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../snefru">Snefru</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../gost">GOST</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../adler32">Adler32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32">CRC32</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../crc32b">CRC32B</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
id="dropdown05"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">HAVAL</a>
<div class="dropdown-menu"
aria-labelledby="dropdown05">
<a class="dropdown-item"
href="../haval128,3">HAVAL128,3</a>
<a class="dropdown-item"
href="../haval160,3">HAVAL160,3</a>
<a class="dropdown-item"
href="../haval192,3">HAVAL192,3</a>
<a class="dropdown-item"
href="../haval224,3">HAVAL224,3</a>
<a class="dropdown-item"
href="../haval256,3">HAVAL256,3</a>
<a class="dropdown-item"
href="../haval128,4">HAVAL128,4</a>
<a class="dropdown-item"
href="../haval160,4">HAVAL160,4</a>
<a class="dropdown-item"
href="../haval192,4">HAVAL192,4</a>
<a class="dropdown-item"
href="../haval224,4">HAVAL224,4</a>
<a class="dropdown-item"
href="../haval256,4">HAVAL256,4</a>
<a class="dropdown-item"
href="../haval128,5">HAVAL128,5</a>
<a class="dropdown-item"
href="../haval160,5">HAVAL160,5</a>
<a class="dropdown-item"
href="../haval192,5">HAVAL192,5</a>
<a class="dropdown-item"
href="../haval224,5">HAVAL224,5</a>
<a class="dropdown-item"
href="../haval256,5">HAVAL256,5</a>
</div>
</li>
</ul>
</div>
</div>
</nav>

You need to override the Bootstrap CSS, change it to:
.nav-link:hover {
color: white !important;
}

Bootstrap mobile navbar dropdown is transparent

I have a Django-powered Bootstrap website. I'm using the theme Modern Business by Start Bootstrap.
This is how it looks on the live sample:
This is how it looks on my website (note the resources text below the logo):
Here's my code for the navbar.
{% load static from staticfiles %}
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container" style="height: 48px;">
<a class="navbar-brand" href="index.html">
<img src="{% static 'web/img/header-logo-2.png' %}" height="70px" style="height: 50px;
position: absolute;
top: 0;"></a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="">Board of Directors</a>
<a class="dropdown-item" href="about-staff">Executive Administration</a>
</div>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="schools">Schools</a>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item"
href="https://www.dropbox.com/s/ngzaxhg4gqlibpx/2016-2017%20OCDL%20Charter.pdf?dl=0"
target="_blank">League Charter</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/0nh1a93og93vqt0/OCDL%20Affidavit%202015-2016.pdf?dl=0"
target="_blank">Student Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/en1t2ek23rxzxlj/OCDL%20Judges%20Affidavit.pdf?dl=0"
target="_blank">Judge Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/lwxsnbpmc29vylq/OCDL%20Judge%20Guide-11-4-15.pdf?dl=0"
target="_blank">Judge Guide</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/tkcvaggipfn91fi/Flow%20Chart%2C%20Orange%20County%20Debate%20League.docx?dl=0"
target="_blank">Blank Flowchart</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/vphswry1d4rgm0d/Speaker%20Performance%20Rubric%2C%20Orange%20County%20Debate%20League.pdf?dl=0"
target="_blank">OCDL Rubric</a>
</div>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>

You can simply add media query for particular screen width. In your case bootstrap navbar will change at a screen width of 768px, so just add this to your css file:
#media screen and (max-width: 787px) {
.navbar-inverse {
opacity: 0.9;
}
}