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.
Related
On my website I use the Bootstrap navbar and on mobile the navbar is hidden and the toggle menu button appears...perfect!
But now I want to add another dropdown right to the toggle menu button that does not hide on mobile. So I added a new outside of the collapse div. But the result is not as I wanted.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<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">
NEW 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>
</nav>
The solution is quite simple. The new display also has to be inside the div that contains the "collapse navbar-collapse" classes. Also, you will have to create another button that opens the collapse directed with the dropdown id. Here is the solution. Regards.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNewContent" aria-controls="navbarNewContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNewContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarNewDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NEW DROPDOWN
</a>
<div class="dropdown-menu" aria-labelledby="navbarNewDropdown">
<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">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
Im trying to edit mobile menu on Bootstrap but getting some troubles. I would like to show Burger icon on left, logo in the middle and sign up button on the right.
My menu is like tihs:
When switch to mobile view, it becomes like:
how can i make it like:
Here are my codes:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<button class="btn signup-button" data-toggle="collapse">
Sign Up
</button>
</div>
</nav>
So what I did was I separated the navbar component and the button and placed them into a flex wrapper and added space between using justify-content: https://getbootstrap.com/docs/5.0/utilities/flex/
<div class="justify-content-between">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
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">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<button class="btn signup-button" data-toggle="collapse">
Sign Up
</button>
</div>
I put everything into a codepen so you can shrink it and see: https://codepen.io/alexeigud/pen/XWpdpOL
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
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>
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;
}
}