Navbar menu showing down page instead of across the page

DEEMM 0
Viewed 25

I am very new to all this. I have built a simple nav bar. The problem is that it shows down the page, instead of across the page. How do I get it to show across the page instead? Thank you in advance.

<!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.0">
     <!--Bootstrap CDN  -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
   integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="css/style.css">

    <title>Document</title>
</head>
<body>

 <!-- nav bar -->
 <nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="the-larder-logo.png" width="50" height="50" alt="">
  </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 show" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Food <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Drink</a>
            <a class="nav-item nav-link" href="#">About</a>
            <a class="nav-item nav-link" href="#">Contact Us</a>
            <a class="nav-item nav-link" href="#">Special Events</a>
          </div>
        </div>
      </nav>
nav navbar html
1 Answers

EDIT: the problem was in <div class="collapse navbar-collapse show" id="navbarNavAltMarkup"> this line...just remove the show class and you're good to go.

As you're using bootstrap you can use the below code to use as navbar...don't forget to add the scripts for bootstrap.

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>
buzz0
Related