Navigation bar text fails to display

Just starting out and trying to create a basic navigation bar, but I can't seem to get the links to show up. All that displays are the logo image and the hamburger icon. How can I make the links visible on the nav bar? Appreciate any help!

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e581878798868286849284d1878b809cce828ec2">[email protected]</a>/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" 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>
     <!-- end of nav bar -->

Looking forward to your assistance.

htmlcssnavbarbootstrap-5nav

Answer №1

After inspecting with Chrome dev tools, the following was discovered: https://i.sstatic.net/gO19T.png

The CSS property display:none caused the navbar to be invisible. To make it visible, the code needs to be changed from:

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

to

<div class="collapse navbar-collapse show" id="navbarNavAltMarkup">

Note: This solution simply makes the navbar visible. As I am not proficient in Bootstrap, there may be more elegant ways to address this issue.

    <!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1f0418041a">[email protected]</a>/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">Change</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>
         <!-- end of nav bar -->
     </body>
     </html>

Answer №2

  • The toggler button navbar-toggler in your code is pointing to a different target (navbarSupportedContent) than the menu you have specified with navbarNavAltMarkup. The id you assign to the element collapse navbar-collapse should be used as the value in data-bs-target
  • Your HTML references Bootstrap 5, but the code appears to be from Bootstrap 4.

You need to make these 2 updates, in Bootstrap 5 there is a change where -bs- needs to be included, whereas in previous versions it was not necessary

  • data-toggle -> data-bs-toggle
  • data-target -> data-bs-target

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6fae6f8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js"></script>

<!-- 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-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarSupportedContent" 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="#">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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require that double-width unicode symbols are displayed as double-width in Markdown or CSS

I am seeking a solution to manage the visual width of double-width unicode characters like the LARGE ORANGE SQUARE ...

cssunicodemarkdownascii-art

What's the difference in width between Inline-Block and Float?

HTML <ul> <li><a href="#">Item #1</a></li> <li><a href="#">Item #2</a></li> <li><a href="#">Item #3</a></li> <li><a href="#">Item #4</a></li> & ...

csscss-float

Tips for automatically scrolling to the bottom of a div when new data is added

I'm working on a project with a table nested inside a div, and it has some unique styling: #data { overflow-x:hidden; overflow-y:visible; height:500px; } Currently, as the table fills up with data, a vertical scroll bar appears. But I wa ...

javascriptjqueryhtmlcss

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"

Is there a way to change the styling of the video element that appears as a black rectangle with a strikethrough play button when the user is prompted for permission on Safari? Does it have a specific ID, class, or tag that can be targeted? I'm curre ...

ioscsssafariquaggajs

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

Having difficulty with PHP code, attempting to output some HTML while also opening a file and displaying its contents

I'm completely new to PHP and I've been experimenting with some code to display button elements that, when pressed, should open a file and write a number to it. Unfortunately, the code doesn't seem to be working as expected and I'm stru ...

phphtml

Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet. Below is the code snippet: <ul class="nav nav-pills"> <li class="nav-item"> ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Modify the color of links when hovering using CSS

I am currently utilizing VScode and attempting to modify the link color on :hover. I am also interested in adding a grow Hover Effect. Here is my code snippet: .subareas a.link { margin: 0 0 10px 10px; float: right; height: 30px; line-height: 29 ...

htmlcsshovermousehover

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

The input form in my Node.js project is not adapting to different screen sizes. I am currently utilizing ejs as the template

I have integrated ejs as a template in my Node.js project, but I am encountering an issue with the input form in the following code snippet. The form is unresponsive, preventing me from entering text or clicking on any buttons. What could be causing this ...

javascripthtmlnode.jsejs

The link text does not appear in black color

Can anyone assist in modifying this code snippet? I'm trying to make the text appear black, but it's showing up as light grey on the Dreamweaver preview screen even though the CSS says it should be black. View Fiddle Below is my HTML code: < ...

csshyperlink

What is the reason that setting the margin of 0 on the body does not eliminate the margin on an h1 element?

I believe the body element should apply styles to all elements contained within it. In this scenario, I am attempting to give my h1 element a margin of 0. body { font: 15px/1.5 Arial, Helvetica, sans-serif; padding: 0; margin: 0; background ...

htmlcss

Tips on adding style to your jQuery autocomplete dropdown

I am currently utilizing jQuery autocomplete functionality. I have configured it to communicate with a service and retrieve records: <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1 ...

javascriptjquerycssjquery-ui-autocomplete

Stop the hover state from being deactivated in Firefox's DevTools

My current issue is with the persistence of the hover state on an element when clicking on another element. Unfortunately, the Firefox DevTools seem to remove the hover state. Take a look at the following animated image: https://i.sstatic.net/DFE5H.gif H ...

htmldebuggingfirefoxhoverfirefox-developer-tools

Incorporating various elements within a single column of a table

I have been attempting to include multiple table cells elements beneath each of my heading cells, but I am facing issues in getting it to work properly. For better understanding, this is a screenshot: https://i.sstatic.net/kg2XR.png My goal is to have o ...

htmlcss

What is the process of extracting attribute values from child elements in XPath for HTML documents?

Initially, I searched for all the necessary elements, but now I am encountering errors while trying to retrieve attribute values from the child elements - title, URL, and image. What could be the mistake in my approach? function getContent($value) { ...

phphtmlxpath

Tips for maintaining knowledge after redirecting to a new page

Building an app using Ionic 4 where I need to display vouchers from a database as images. Each image should act as a link to a details page showing more information about that specific voucher. However, I am struggling to figure out how to keep track of th ...

htmlangulartypescriptionic4

Angular HTML is throwing an error related to object arrays

Is there a way to display only specific fields of an array? <div class="form-check" *ngFor="let periodo of filterPeriodos()"> <div>{{periodo.periodos | json}}</div> <input class="form-check-input mr- ...

javascripthtmlangular