The navigation bar seems to have disappeared from the second page of the website

My navigation bar is working perfectly on my landing page, but when I copied and pasted it onto the second page, it's not showing up. I'm puzzled as to what could be going wrong, as I've checked and rechecked the code multiple times.

I have a feeling that it's just a small detail I'm missing, but I've been staring at it for a while and I can't seem to pinpoint the issue.

Here's the code for my second page where the navigation bar isn't displaying:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Reservations</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="reservations.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <link rel="icon" href="travel.png">
</head>
<body>
<style>
  h1 {
   color: black;
   text-align: center;
  }
 .form-group {
   width: 400px;
   text-align: justify;
 }
body {
  background-color: #DCDCDC;
}

</style>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="travelindex.html">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="reservations.html">Reservations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="aboutus.html">About Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

  <h1><strong>Reservation Information</strong></h1>
    <form action="contactform.php" method="post" id="reservationform">

    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" class="form-control">
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" class="form-control">
    </div>

    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input type="text" name="phone" id="phone" class="form-control">
    </div>

    <div class="form-group">
      <label for="adults">Adults</label>
      <input type="number" name="adultsNo" id="adultsNo" class="form-control">
    </div>

    <div class="form-group">
      <label for="children">Children</label>
      <input type="number" name="children" id="children" class="form-control">
    </div>

    <div class="form-group">
      <label for="city">City</label>
      <select name="city" id="city"  style="width: 250px" class="form-control">
      <option selected disabled>Select</option>
      <option value="Brisbane">Brisbane</option>
      <option value="Vancouver">Vancouver</option>
      <option value="New_York_City">New York City</option>
      <option value="Berlin">Berlin</option>
      <option value="Cancun">Cancun</option>
      </select>
    </div>

    <div class="form-group">
      <label for="activity">Activity</label>
      <select name="activity" id="activity" style="width: 250px" class="form-control">
      <option selected disabled>Select</option>
      </select>
    </div>

    <div class="form-group">
      <label for="traveldate">Travel Date</label>
      <input type="date" name="traveldate" id="traveldate" style="width: 250px" class="form-control">
    </div>

    <div class="form-group">
    <button type="submit" form="reservationform" value="Submit" style="width: 100px">Submit</button><br>
    </div>

    <div class="form-group">
    <button type="reset" value="Reset" style="width: 100px" >Reset</button>

  </form>

  </div>
  </div>
  <script src="megatravel.js"></script>

  </body>
</html>

Answer №1

Consider making the following adjustment:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

Change it to:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

It's possible that you're using an outdated version/link that's causing an error.

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

Perform an AJAX call from the main file after inserting data using AJAX beforehand

I am in need of assistance with a question I have. On a page, an AJAX function is executed after the page finishes loading, creating a table in PHP that contains two buttons: one for changing passwords and the other for deleting. This table is then injecte ...

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

Issues with special characters in @font-face rules

For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...

Maintain the aspect ratio of an image within a flex container when the height is adjusted

I'm currently facing an issue with an image in a flex container. My goal is to maintain the image's ratio when the height of the container or window is decreased or resized. Check out this sample fiddle html, body { height: 100%; } .wrappe ...

The expression '<xsl:value-of select="document(content)//title"/>' results in a null node response

Can someone assist me in retrieving the title of a basic HTML document in order to create a sitemap? I have been receiving an empty value every time I try. Upon inspecting the issue, it appears that the document(content) is returning document nodes. It s ...

Navigating to the end of the fixed-height table while inserting new elements

I'm experiencing an issue with a function that adds new items to a table with fixed height and overflow: auto set. When new items are added, the scroll should immediately go to the bottom of the table. Unfortunately, this is not happening as expected. ...

The position of the parent element's bounding box in relation to the child element

I've been mulling over this question for quite some time now, and I finally decided to bring it up. Hopefully, it's straightforward and not something that has been addressed before... Here's the scenario: I have a list of items with anchor ...

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

Deciphering HTML with AngularJS

We are currently working with AngularJS version 1.5.6 and facing an issue with HTML characters not being displayed correctly in our text. Despite trying various solutions, we have been unsuccessful in resolving this issue. We have explored numerous discuss ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

Struggling to align images side by side using HTML and CSS along with figcaption and buttons

Adding buttons below images on my webpage is proving to be a bit challenging. I tried using the figcaption tag, but it resulted in the images stacking on top of each other instead of side by side. **My HTML:** <section class="mostpurch"> ...

Trigger submission issue encountered with Jquery in a dialog (modal) window

It's somewhat difficult for me to fully explain my problem. Nevertheless, I'll give it a go. In my HTML code, I have implemented several triggers using Jquery. Trigger 1 is responsible for validating specific items within a form. Once Trigger 1 ...

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

What is a simple way to export an HTML table to an Excel file in ASP.NET?

We need to create a report from the database and include an export button so users can download the report in an Excel-readable format. The priority is on simplicity of implementation, so using CSV is preferred over XLS if it's more straightforward. ...

What is the best way to navigate to a component from a different component in Angular?

After spending countless hours, even a couple of days, trying to solve this issue, I still can't find a solution. I've exhausted all options and haven't come across a similar case. My goal is to smoothly scroll to another component on my on ...

Adding a gradient to enhance an SVG chart

Hey there! I'm currently experimenting with Plotly to create some awesome charts, and I've been trying to figure out how to give my area-charts a gradient instead of the usual fill with opacity. This is how I typically build my graph: Plotly.ne ...

Troubleshooting custom fonts not displaying on a .NET website: Importing fonts for web use

https://i.stack.imgur.com/uWSsY.pngI am well-versed in HTML, but my knowledge of VB.NET is limited. In standard CSS, including a font like the one below would typically work, but I have encountered issues when attempting to do so in .NET. @font-face { f ...

Leveraging concealed input for transmitting additional information via asynchronous JavaScript and XML (Ajax

My current approach involves using hidden inputs to include extra values with Ajax when a form is submitted by a user. The rationale behind this strategy is that I have a lengthy list of text fields, each accompanied by a button. Upon clicking any button, ...

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...