This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
Closed 8 months ago.
How do you align Bootstrap 5 navbar items to the right? In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="col-md-6">
<nav class="navbar navbar-expand-lg navbar-light bg-info ">
<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 ms-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#">
<h5>Home</h5><span class="sr-only"></span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<h5> About</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">
<h5>Contact me</h5>
</a>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Bootstrap 5 no longer use ml and mr -- instead they swapped it out for ms (margin start) and me (margin end) to account for RTL support. Obviously in RTL right and left are swapped but start and end still makes sense in this context
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-sm 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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Related
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center content in responsive bootstrap navbar
(12 answers)
Bootstrap Center Navbar Items
(5 answers)
Closed 10 months ago.
i tried to center elements in bootstrap 5 navbar as vue js template and niether dispay flex and justify content: center, nor text-center didnt work; i tried applaying it to align-items to:
.navbar
.container-fluid
container-fluid a
container-fluid a ul
container-fluid a ul li
and it didnt work for me; i want it to work on computer sized screens;
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item text-center">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
Automatic margin on the start and end sides does the trick. Bootstrap's horizontal margin class mx-auto works, too. This is just implementation of the standard CSS centering technique using Bootstrap classes.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
you want to center your menu items, all of them are placed in div.collapse so adding justify-content:center; to it will help you,,, BUT it didn't work for you because div.collapse is not a flexbox! so adding justify-content:center; ALONE, won't has any effect
you need to add d-flex class to it too so it can work properly
here in this code I've added d-lg-flex assuming you want your items to be centered in larger than lg breakpoint, this can help you :
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-lg-flex justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item text-center">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
if you want your items to be centered in all devices simply remove -lg from d-lg-flex in div.collapse element
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I'm pulling my hair out trying to center my nav items and have my button at the end. I managed to get the button to the end but cannot figure out how to center the items+brand. Any help would be appreciated!
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>DOC</title>
</head>
<body>
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">The team</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-outline-success" type="submit">Login</button>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Well you can't do such thing inside of a single flex (it might be possible using margin auto but I'm not sure about it) but using two nested flex boxes can help you
here in this code I used the div.collapse as first flexbox and ul.navbar-nav as the second one
<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 justify-content-between navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav w-100 justify-content-center mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">The team</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Contact Us</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-outline-success" type="submit">Login</button>
</div>
</div>
</div>
Here is a live demonstration of how it works, let me know if you meant something else
https://jsfiddle.net/mahdiar_mansouri/fohgr7ew/7/
I'm starting my studies in fullstack and we were just shown bootstrap. I'm doing this site responsive, and I modified the menu bar to my please. The only thing I'd like to change is the menu to colapse into the toggle button only below 600px-ish wide (aka for phones). Any assistance will be appreciated
html
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Academia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tienda</a>
<li class="nav-item">
<a class="nav-link" href="#">Nosotros</a>
<li class="nav-item">
<a class="nav-link" href="#">Contacto</a>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
As mentioned in the How it works section of Bootstrap navbar documentation, you can use navbar-expand-sm instead of navbar-expand-lg. This will collapse the navbar only on screens smaller than 576px(sm).
As stated in the title, due to some internal issue of data-bs-toggle in a newer version of bootstrap, it only collapses and does not hide it afterward, and after reading a similar post about this issue https://github.com/twbs/bootstrap/issues/32643 where they addressed it, they didn't include any alternative in meantime, and as I am a beginner in web development, I am unsure what would be the best approach to do the same feature?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container">
<a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-white" href="/contact">Contact</a>
</li>
I don't see any problem. Please check if you included both css and js links properly and I see you are using text-white which makes the text like invisible if you are not having a dark theme or any contrast background by default.
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<div class="container">
<a class="navbar-brand logoText" href="#"
>Power<span style="color: #0ac1ce;" class="logoText">In</span>Button</a
>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="navbar-toggler-icon">menu</i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-black" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-black" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-black" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
Here your issue is with the Text-color being white There is a class in bootstrap bg-dark Giving that to nav will change the background color so you can see the text ...
And the issue u mentioned is for modal collapse, not navbar
Here is the updated code
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark p-md-3">
<div class="container">
<a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>
<!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/cv">CV</a>
</li>
<li class="nav-item me-4">
<a class="nav-link text-white" href="/contact">Contact</a>
</li>
I have this issue with bootstrap 5 and vue3, and made a function onclick, that looks like this:
toggleMenu() {
try {
let el = document.getElementById('navbarCollapse');
if (el) {
el.classList.toggle('show');
}
} catch (error) {
console.error(error);
}
},
which is simply called from the button click.
I removed the data-bs-... properties from the button, naturally.
<button class="navbar-toggler" #click="toggleMenu()" type="button" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
The idea is to just toggle the 'show' class on the collapsible part of the menu.
This question already has answers here:
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 2 years ago.
I'm trying to setup a navbar where the links would be to the right when screen is large enough and the bar is not collapsed. However, despite having ml-auto included as the class in the unordered list (ul) tag, the links (Contact, Pricing, Download) are still stuck to left next to the Brand item. How do I fix this? The following is the code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<section id="title">
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">brand</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="w-100">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Hi Gokulan,
Let's use the mr-auto instead on the <ul> tag to move the elements to the right. If is possible, please use the code I am providing you with on this post. Don't forget to run it in full page if you test this snippet first on stackOverflow to see the results. I certainly hope this helps, pal!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>