I made a navbar with bootstrap and the dropdown menu has a white line at the top and bottom. I want the whole dropdown to be the same color but can't seem to figure out how to get rid of the white lines. BTW I'm a beginner coder and this navbar was straight copied and pasted from getboostrap so if anything is looking wrong please let me know thank you!
Here is a picture of the dropdown
Here's my HTML:
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#3d3d3d">
<a class="navbar-brand" href="https://marginedge.com/" target="_blank">
<img src="navbarLogo.png" width="200">
</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="#">Flow <span class="sr-only">(current)
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EDI Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D.C. Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Zendesk</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">
Client Facing
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Isabella</a>
<a class="dropdown-item" href="#">Eggspectation</a>
<a class="dropdown-item" href="#">Ford's</a>
<a class="dropdown-item" href="#">Hard Rock</a>
<a class="dropdown-item" href="#">Wendy's</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demos</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">
Analyst
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">IR Error Report</a>
<a class="dropdown-item" href="#">Rec Error Report</a>
<a class="dropdown-item" href="#">Quarterly Team Evaluations</a>
<a class="dropdown-item" href="#">Data Fixer for Analysts</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Redash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Central Data Health Check</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-lg-2" type="search" size="40" placeholder="Search Redash Reports..." aria-label="Search">
<button type="button" class="btn btn-outline-primary btn-lg">Search</button>
</form>
</div>
and here's is the CSS:
body{
padding: 0;
margin: 0;
}
nav {
width: 100%;
}
nav ul li{
padding: 5px 10px;
font-size: 20px;
}
.dropdown-menu a{
font-size: 15px;
color: #d6d6d6;
background-color: #3d3d3d;
}
Addp-0 class on .dropdown-menu. It will remove he padding causing the white space
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
}
nav ul li {
padding: 5px 10px;
font-size: 20px;
}
.dropdown-menu a {
font-size: 15px;
color: #d6d6d6;
background-color: #3d3d3d;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#3d3d3d">
<a class="navbar-brand" href="https://marginedge.com/" target="_blank">
<img src="navbarLogo.png" width="200">
</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="#">Flow <span class="sr-only">(current)
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EDI Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D.C. Sales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Zendesk</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">
Client Facing
</a>
<div class="dropdown-menu p-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Isabella</a>
<a class="dropdown-item" href="#">Eggspectation</a>
<a class="dropdown-item" href="#">Ford's</a>
<a class="dropdown-item" href="#">Hard Rock</a>
<a class="dropdown-item" href="#">Wendy's</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demos</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">
Analyst
</a>
<div class="dropdown-menu p-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">IR Error Report</a>
<a class="dropdown-item" href="#">Rec Error Report</a>
<a class="dropdown-item" href="#">Quarterly Team Evaluations</a>
<a class="dropdown-item" href="#">Data Fixer for Analysts</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Redash</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Central Data Health Check</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-lg-2" type="search" size="40" placeholder="Search Redash Reports..." aria-label="Search">
<button type="button" class="btn btn-outline-primary btn-lg">Search</button>
</form>
</div>
Related
I'am learning how to use bootstrap, but I have a problem with reponsiveness.
When I have my content wide it looks like my navbar doesn't expand to the right:
Here is code of my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Does anybody know how to fix it?
Can you put an id or a class and then select it in your css file. After that you can give
width: 100% or width: 100vw if these don't work u can use overflow-x: hidden;
So I have been trying to create a lateral menu that has a logo right on top of it as well as a traditional navigation menu next to it. But I seem to have ran into a problems where I cannot put my logo inside the lateral menu and to align it. Here is the code I have so far that I am trying to use. My final goal is to have it like this mockup that of a page I have made, any help will be most welcome https://i.stack.imgur.com/wwcXT.png
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<nav class="navbar-lateral">
<ul>
<li class="logo">
<a href="" class="nav-link">
<img src="./img/so.png" alt="">
</a>
</li>
</ul>
</nav>
CSS for lateral bar
.navbar-lateral {
width: 5rem;
height: 100vh;
position: fixed;
background: white;
}
You can use Bootstrap built-in nav for the horizontal like you did and add a custom navbar to the lateral side with the logo inside it. Something like this:
HTML
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</li>
</ul>
</div>
</nav>
</div>
<div class="lateral-nav">
<img src="https://tkruger4.files.wordpress.com/2010/11/logo-2_rgb.jpg" alt="">
item
item
item
</div>
CSS
.lateral-nav {
position:absolute;top:0;left:0;width:100px;background:white;height:300px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
}
img {
width:60px;height:60px;margin-top:10px;
}
.lateral-nav a {
writing-mode:vertical-lr;text-orientation:mixed;margin:10px 0;}
.navbar {
margin-top:10px;
}
I'd like to put my search bar above other buttons like this
But, my responsive navbar looks like this (I use Bootstrap 4)
How could I change their positions?
My HTML code:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Géneros
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Acción</a>
<a class="dropdown-item" href="#">Aventura</a>
<a class="dropdown-item" href="#">Comedia</a>
<a class="dropdown-item" href="#">Familiar</a>
<a class="dropdown-item" href="#">Terror</a>
<a class="dropdown-item" href="#">Romance</a>
<a class="dropdown-item" href="#">Drama</a>
<a class="dropdown-item" href="#">Musical</a>
<a class="dropdown-item" href="#">Fantasia</a>
</div>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Películas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Estrenos</a>
<a class="dropdown-item" href="#">Ranking</a>
<a class="dropdown-item" href="#">Más vistas</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Series</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar películas" aria-label="Search">
<i class="fas fa-search"></i>
</form>
<ul class="navbar-nav ml auto">
<li class="nav-item active">
<a class="nav-link" href="#">Entrar</a>
</li>
<li class="nav-item active">
<!-- <a class="nav-link" href="#"> -->
<button type="button" class="btn btn-primary">Registro</button>
<!-- </a> -->
</li>
</ul>
</div>
</div>
</nav>
My CSS code:
#media screen and (max-width:768px){
.navbar{
position: fixed;
background: #0c1a4d;
height: 100vh;
width: 50%;
flex-direction: column;
}
}
Navber code:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #FDFEFF;">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Bootstrap code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Dropdown menu inside the navbar doesn't open, anyone an idea on how to fix this?
Not very experienced with bootstrap and don't now what the problem is.
Your button don't call your div
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
your "aria-labelledby" does not match the button id "id="dropdownMenuButton""
it's in the bootstrap documentation
Try this for Bootstrap 4 dropdown navbar
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #fdfeff;">
<a class="navbar-brand" href="#">
<img src="images\logo1.png" width="200" height="80" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navCollapse"
aria-controls="navCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="navbar-nav dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Behandelingen
</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="sportmassage.html">Sportmassage</a>
<a class="dropdown-item" href="#">Massagetherapie</a>
<a class="dropdown-item" href="#">Ontspanningsmassage</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Afspraak maken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tarieven</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Nevermind I solved the issue, stupid mistake by not adding jquery
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>