Hey everyone I started learning to use Bootstrap last week and so I am trying to make my beginner portfolio for practice. I’m trying to get the navbar to turn into a hamburger menu on mobile sized screens but I haven’t quite figured it out. I’m pretty sure it has something to do with wrapping the entire navbar in div that has class “navbar-expand-lg” and also wrapping the list in some sort of div but I cant quite figure it out. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portolio</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section id="navbar">
<nav class="d-flex flex-wrap justify-content-center py-3 mb-4">
<p class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Name Here</span>
</p>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#projects" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="#experience" class="nav-link">Experience</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
I tried wrapping the entire thing in <div class=”navbar navbar-expand-lg> and the list in but it caused the list to completely disappear once it went below the large screen breakpoint
New contributor
Christopher Hogan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.