I'm a beginner and a boomer. I'm learning Dreamweaver through the manual and youtube videos and this is literally my third day. There might be a simple way to do this, but I cannot figure it out and a search for the answer is turning up nothing. I want to create a website menu with 12 pages. Obviously, that's too long on a hamburger menu for mobile users. I'd like to break that menu into two columns of 6 pages each.
I'm using a youtuber's tutorials named Jong-Yoon Kim. He's an excellent instructor and I've learned a lot from him. Below is the code that he had us prepare for the menu, but I added additional pages (my future website will have 12 pages). As you can see in a mobile preview, it is too long and pushes the contents of the page down very far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<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="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<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="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Volunteer</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Adopt</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- body code goes here -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
</body>
</html>
I marked up a screenshot of what I'd like to do, if it's possible.Mobile Hamburger Menu Screenshot
Try this one.