I have this bootsrap navBar, when i resize the window the navbar is shrunk and displays the hamburger, however when i click the hamburger the links aren't shown.
this is the code:
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive"
src="{% static 'front/images/logo2.png' %}"
alt="404"
style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0"
style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link"
href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i>
{% if user.is_authenticated %}
User Area - {{ user.first_name}}
{% else %}
Login
{% endif %}</a></li>
</ul>
</div>
</div>
</nav>
</div>
I feel like i am missing something but i can't figure it out.
Instead of data-bs-toggle and data-bs-target use data-toggle and data-target.I solved your problem with the toggler, the rest is up to you... Work on your code! It leaves a lot to be desired ... ;-) Good Luck !
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Bootstrap 4.6 Navbar with toggler</title>
</head>
<body>
<div class="fixed-top">
<nav class="navbar navbar-dark navbar-expand-lg cusSticky" style="background-color: #000000b3;">
<!-- Navbar content -->
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'front:index' %}"><img class="image-responsive" src="{% static 'front/images/logo2.png' %}" alt="404" style="position: relative; max-width: 268px; margin-left:100px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="display: flex; margin-right: 50; margin-left:500px; text: white;">
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:about' %}">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:portfolio' %}">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:contact' %}">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'front:calendar' %}">Calendar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'user_area:loading'%}">
<i class="fa fa-user" aria-hidden="true"></i> {% if user.is_authenticated %} User Area - {{ user.first_name}} {% else %} Login {% endif %}</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
It doesn't look as though you have any dropdown-menu's inside the main navbar-nav list. Copy this for as many dropdown's as you need.
<ul class="navbar-nav">
<!-- Dropdown Start -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
MAIN DROPDOWN BUTTON
</a>
<ul class="dropdown-menu" aria-labelledby="servicesDropdown">
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 1</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 2</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 3</a></li>
<li><a class="dropdown-item" href="#">DROPDOWN ITEM 4</a></li>
</ul>
</li>
<!-- Dropdown End -->
</ul>
Related
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navspacing"></span>
<a class="navitems hover" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span style="margin:5px;" class="navbar-toggler-icon"></span>
</button>
<div class=" collapse navbar-collapse topnav" id="collapsibleNavbar">
<ul class="navbar-nav" >
{% if user.is_authenticated %}
<li class="nav-item navitems">
<a class="nav-link hovering" href="{% url 'light_novel:characters_page' %}">Characters</a>
</li>
<li class="nav-item navitems">
<a class="nav-link " href="{% url 'light_novel:moves_page' %}">Moves</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:chapters_page' %}">Chapters</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:outfits_page' %}">Outfits</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:sights_page' %}">Sight</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:timelines_page' %}">Timeline</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:scratchpads_page' %}">Scratchpad</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'light_novel:statistics' %}">Statistics</a>
</li>
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
</li>
{% else %}
<li class="nav-item navitems">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I have an app where I want to use a sidebar containing the main URLs and the brand name with a navbar for some other pages like the FAQ and about us.
However, I'm facing a problem in making the positioning of the sidebar absolute. When I was searching I saw this answer of making the bars to prevent them from overlapping.
As you can see the problem is with the sidebar.
Here's the HTML:
<div class="row">
<div class="col-md-2 bg-dark">
<!-- sidebar -->
<nav class="navbar navbar-light bg-dark" id="sidebar">
<ul class="navbar-nav mr-auto">
<div class="brand-panel">
<li class="nav-item active">
<a class="navbar-brand" href="{% url 'home' %}"><h5>Sentizer <small class="one" > Beta</small></h5></a>
</li>
</div>
<li class="nav-item active">
<a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
</li>
<li class="nav-item">
<button type ="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
</li>
</ul>
</nav>
</div><!-- sidebar -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12 px-0">
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1" >
<div class="container-fluid">
<form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET" >
<input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-primary btn-sm" type="submit" ><i class="material-icons">search</i></button>
</form>
<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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'faq' %}">FAQ</a>
</li>
<li class="nav-item">
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
</li>
<li class="dropdown-item text-nowrap">
<a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
</li>
</ul>
</li>
<li class="nav-item">
<i class="fa fa-search fa-lg"></i>
</li>
{% else %}
<li class="nav-item text-nowrap">
<a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div><!-- navbar -->
</div>
I tried changing the positioning of <nav class="navbar navbar-light bg-dark" id="sidebar"> but it didn't work as it's relying on the background div before it.
How can I fix this and is there a better approach to make to bars in the page without any overlapping issues?
You will need to extend your 'app container' (here your first div#app) to screen height using height: 100vh. Please try it on full page :
#app {
height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div id="app" class="row">
<div class="col-md-2 bg-dark">
<!-- sidebar -->
<nav class="navbar navbar-light bg-dark" id="sidebar">
<ul class="navbar-nav mr-auto">
<div class="brand-panel">
<li class="nav-item active">
<a class="navbar-brand" href="{% url 'home' %}">
<h5>Sentizer <small class="one"> Beta</small></h5>
</a>
</li>
</div>
<li class="nav-item active">
<a class="nav-link" href="{% url 'patients:dashboard' %}">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'patients:patients_list' %}">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:tickets' %}">Tickets</a>
</li>
<li class="nav-item">
<button type="button" class="button1 nav-link" data-toggle="modal" data-target="#modalContactForm">Feedback</button>
</li>
</ul>
</nav>
</div><!-- sidebar -->
<div class="col-md-10">
<div class="row">
<div class="col-md-12 px-0">
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" id="top-nav1">
<div class="container-fluid">
<form class="form-inline" action="{% url 'patients:patient_search' %}" method="GET">
<input class="form-control mr-sm-2" id="sebar" type="text" size="45%" placeholder="Search" aria-label="Search" name="q">
<button class="btn btn-outline-primary btn-sm" type="submit"><i class="material-icons">search</i></button>
</form>
<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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'about' %}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'faq' %}">FAQ</a>
</li>
<li class="nav-item">
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
{{request.user.first_name}} {{request.user.last_name}}<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="nav-link" href=" {% url 'accounts:details' pk=request.user.pk %}">Profile</a>
</li>
<li class="dropdown-item text-nowrap">
<a class="nav-link" href="{% url 'accounts:logout' %}">Sign out</a>
</li>
</ul>
</li>
<li class="nav-item">
<i class="fa fa-search fa-lg"></i>
</li>
{% else %}
<li class="nav-item text-nowrap">
<a class="nav-link trigger-btn" href="#loginModal" data-toggle="modal">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</div><!-- navbar -->
</div>
Bootstrap toggler not working. The icon is visible but after reducing browser size its not dropping links. I read other solutions also but mostly says load javascript before bootstrap, I tried loading js at first before bootstrap also but still it's not working. Below is the code I am using
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="Bootstrap/js/bootstrap.min.js"type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.min.css" rel ="stylesheet">
<script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html;">
<title>HTML Test</title>
</head>
<body >
<!-- Container -->
<div class=”container”>
<!-- Navigation -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navigation Bar</a>
<button class ="navbar-toggler" type ="button" data-toggler="collapse" data-target="#navbarSupportContent" aria-expanded="flase" aria-lable ="Toggle navigation">
<span class = "navbar-toggler-icon" ></span>
</button>
<!-- links -->
<div class="collapse navbar-collapse" id="navbarSupportContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<!-- Drop down -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href ="#" data-toggle ="dropdown">More</a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Logout</a>
</li>
</ul>
</div>
<!-- Search Button and text column -->
<form class="form-inline my-2 my-lg-0" >
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-lable="Search">
<button class="btn btn-outline-sucess my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<!-- pagination -->
<nav aria-lable="pageNavigation" >
<ul class="pagination justify-content-end">
<li class="pagination-item"><a Class="page-link" href="#">Previous</a></li>
<li class="pagination-item"><a Class="page-link" href="#">1</a></li>
<li class="pagination-item"><a Class="page-link" href="#">2</a></li>
<li class="pagination-item"><a Class="page-link" href="#">3</a></li>
<li class="pagination-item"><a Class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
There's a typo in the toggler button. It should be data-toggle="collapse" not data-toggler="collapse".
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent" aria-expanded="flase" aria-lable="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
First off, I want to move that 3 line toggle button to the right of the newsletter nav-link. This is showing for medium, and below, sized screens. On large screens, the side-nav links turn into normal nav-links. Code is provided later.
Then,
I want the toggle button to turn into an 'X' button on the top right of the slide nav (where the 3 line toggle button would have been if the side-nav was hidden).
Here's what I have so far:
HTML
<nav class="navbar navbar-expand-lg navbar-inverse fixed-top" style="background:rgba(1,1,1,0);">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'index' %}"><img style="height:75px; width: 75px;" class="logo img" src="{% static 'homepage/img/leaves.png' %}">COMPANY</a>
<button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#sideNav" aria-controls="sideNav" aria-expanded="false" aria-label="Toggle navigation">
<div class="frame" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
<ul class="navbar-nav ml-auto">
<li>
<a data-toggle="modal" href="#" data-target="#newsletterModal" class="nav-link " id="navlink">Newsletter</a>
</li>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item {% if nbar == 'page' %}active{% endif %}">
<a class="nav-link js-scroll-trigger" href="{% url 'page' %}" id="navlink">page</a>
</li>
<li class="nav-item {% if nbar == 'about' %}active{% endif %}">
<a class="nav-link js-scroll-trigger" href="{% url 'about' %}" id="navlink">About Us</a>
</li>
<li class="nav-item {% if nbar == 'login' %}active{% endif %}">
<a class="nav-link js-scroll-trigger" href="{% url 'login' %}" id="navlink">Log In</a>
</li>
</ul>
</div>
</ul>
<div class="hidden" id="sideNav">
<ul class="navbar-side">
<li class="navbar-side-item">
<a class="side-link js-scroll-trigger" href="{% url 'page' %}">page</a>
</li>
<li class="navbar-side-item">
<a class="side-link js-scroll-trigger" href="{% url 'about' %}">About Us</a>
</li>
<li class="navbar-side-item">
<a class="side-link js-scroll-trigger" href="{% url 'contact' %}">Contact Us</a>
</li>
<li class="navbar-side-item">
<a class="side-link js-scroll-trigger" href="{% url 'login' %}">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
hidden {
display:none;
}
.navbar-side {
height: 100%;
width: 50%;
position: fixed;
top: 0;
right: 0;
padding: 0;
list-style: none;
background-color: rgba(66,67,68,1);
overflow-y: scroll;
z-index: 1000;
}
.navbar-side-item {
padding: 1.5rem 0;
margin: 0;
height: 5rem;
}
.side-link {
padding-left: 2rem;
}
Any ideas on fixes or where I can look to figure this out?
The following only addresses your first question because Stack Overflow rules don't allow answering/asking multiple unrelated questions in one. Instead, you are advised to post separate questions when the issues are so different from each other.
So, to solve the main problem of this question i.e. the problem related to the question title, you first place the newsletter link element before the toggler button in the HTML and then you use the order classes to reorder things like shown in the code snippet below.
The order classes you'll need there are:
order-lg-3 for the newsletter item
order-2 for the toggler and
order-last order-lg-2 for the main links group
order-last says: On the smallest screens, you shall appear last. And then order-lg-2 says: but from the large (lg) screen size onwards you shall appear as number 2 in the order.
That setup works because the toggler button is automatically hidden on larger screens and because it appears between the newsletter link and the main link group in the HTML.
The order of items in the HTML is normally treated for determining the order of appearance unless the order classes kick in to change that.
Here's a working code snippet (click "run code snippet" below and expand to full page for testing):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img class="brand-icon mr-2" src="https://placehold.it/60" width="30" height="30" alt="">Company
</a>
<ul class="navbar-nav ml-auto order-lg-3 pr-3">
<li class="nav-item">
<a class="nav-link" href="#">Newsletter</a>
</li>
</ul>
<button class="navbar-toggler order-2" 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 order-last order-lg-2" 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>
</nav>
I'm trying to implement a bootstrap dropdown menu, despite the right class being applied to the sublist, I'm losing my formatting and the padding that normally applies to bootstrap.
I'm using bootstrap 4.0.0-alpha.2 as follows:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs navbar-collapse" id="exCollapsingNavbar2">
<a class="navbar-brand" href="{% url 'home' %}"><img width="140" src="{% static 'images/openopps_logo.png' %}"</a>
<ul class="nav navbar-nav">
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'pricing' %}">Pricing</a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'home' %}">Blog</a></li>
<li class="nav-item oo-roboto-override dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="{% url 'about' %}">
About
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Vision</li>
<li>Our company</li>
<li>FAQs</li>
<li>Contact us</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
{% if user.is_authenticated %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_logout' %}"><button class="btn btn-sm btn-oo-outline">Logout</button></a></li>
{% else %}
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'registration_register' %}"><button class="btn btn-sm btn-oo">Sign Up</button></a></li>
<li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_login' %}"><button class="btn btn-sm btn-oo-outline">Login</button></a></li>
{% endif %}
</ul>
</div>
</nav>
Bootstrap 4 has an extra class required for dropdown menus. Using the following class in the <li> tags works.
<li class="dropdown-item">Vision</li>