bootstrap navbar code
- January 4, 2023
- 1 reply
- 1647 views
I'm trying to create a page with Bootstrap, and can't seem to get past the first step... fixing navbars to the top and bottom. The page is supposed to look like the attached image (minus social icons), but it doesn't. tia
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GreenBeaks®, Inc.; All Natural Pet Supplements;</title>
<meta name="description" content="Dairy Air Designs- Custom Graphics, Business Cards, Website Design, Website Maintenance, Photagraphy, Photo Retouching"/>
<meta name="keywords" content="Dairy Air Designs- custom graphics, business cards,website design,website maintenance,photagraphy,photo retouching"/>
<link rel="shortcut icon" href="DAD images/PngItem_1579571.ico" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GreenBeaks® Home</title>
<style type="text/css">
body
.font-color {
}
#navtextcolor {
}
#yyyyyy {
}
</style>
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-image: url(images/gbhomenonav.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</head>
<body style="padding-top: 70px; padding-bottom: 70px;">
<nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"></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">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
<li class="nav-item active"> <span style="color: rgba(255,255,255,1)"><a href="#" class="nav-link">Herb Salad™</a></span><a href="#" class="nav-link"> <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Hatched! Eggshell™</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Our Products </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <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" href="#">Twin Beaks® Aviary</a> </li>
</ul>
<nav class="navbar fixed-bottom navbar-expand-lg navbar-light font-color"> <a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Account <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="#">Support</a> </li>
<li class="nav-item dropup"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resourses </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Our Chosen Herbs</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Calcium Absorbtion</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">What is Animal Self-medication</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Calcium Absorbtion</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">???</a>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">How We're the Best</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" href="#">501</a> </li>
</ul>
</div>
</nav>
</div>
</nav>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap-4.4.1.js"></script>
</body>
</html>
AdChoices