Building a sleek and responsive navigation bar using HTML, CSS, and Bootstrap is

As a newcomer to programming and completely new to HTML, I am currently working on a class project for my Web Development course. The task involves creating a webpage for a fictional company named "DW Gift Company." One of the requirements for this project is to include a navbar at the top (non-fixed) that directs to various sub-pages such as About, Items, Order, and more. However, I'm encountering difficulties with the navbar and I can't seem to get it to appear correctly.

Below is the code I have written so far. I have included the nav tag with what I believe are the correct classes, along with ul's and li's. I'm aware that ul stands for an unordered list, but I am not completely sure about what li represents. I have been following an online video tutorial by my professor and I am quite confident that I have accurately followed along and typed exactly as instructed. However, my navbar looks quite different from what is displayed in the tutorial (I have attached images of what it should look like, what mine looks like, and what the professor's looks like).

My written code is as follows:

<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/DWstyle.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>

<body>
    <img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">

    <nav class="navbar navbar-expand-lg navbar-light bg-beige">
        <a class="navbar-brand">DW Gift Company</a>

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

            <ul class="navbar-nav mr-auto">

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 1</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 3</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 4</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 5</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 6</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 7</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 8</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Item 9</a>
                </li>

            </ul>
        </div>
    </nav>
</body>


</html>

The desired appearance is shown here.

This is what mine currently looks like.

And here is what my professor's navbar looks like.

I suspect that the appearance issue may be related to the bullets displayed next to the li's, but I'm uncertain.

Summary: I am struggling to create a navbar in HTML for a website as it does not match the expected design, despite closely following my instructor's code from the online tutorial.

Answer №1

Consider using this alternative code. Your current code may be a bit challenging for beginners to grasp. If you're looking to delve deeper into web development, it might be beneficial to start by learning CSS before transitioning to Bootstrap.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body><nav class="navbar navbar-default">
 <div class="container-fluid">
    <div class="row">
    <div class="navbar-header">
      <img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
        <a class="navbar-brand">DW Gift Company</a></div>
        <div class="collapse navbar-collapse" id="DWnavbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">item 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">item 3</a></li>
          <li><a href="#">item 4</a></li>
          <li><a href="#">item 5</a></li>
        </ul>
        </li>
        </ul>
        </div>
    </div>
</div>
</nav>
</body>
</html>

Answer №2

Utilize Bootstrap's files directly from its Content Delivery Network (CDN) by including the following paths in your code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

If your files are not loading as expected based on your HTML code, it might be due to incorrect file paths. The following lines in your code reference local stylesheets:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">

These two lines indicate that the CSS files (bootstrap.min.css and bootstrap-theme.css) should be located in a folder named "css" parallel to your HTML file.

To resolve this issue, you can either download Bootstrap's CSS files and place them in a folder named css next to your HTML file, or simply access the files directly from Bootstrap's CDN path.

<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-beige">
    <a class="navbar-brand"><img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">DW Gift Company</a>

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

      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href="#">Item 1</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 4</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 5</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 6</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 7</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 8</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="#">Item 9</a>
        </li>

      </ul>
    </div>
  </nav>
</body>


</html>

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

How can I show the remaining paragraph text upon clicking a button in a responsive manner using CSS and JavaScript?

I want to add a nice animation effect to the height of my text when a button is clicked. I've managed to achieve this by setting a height: 30px with overflow: hidden initially, and then toggling a class with height: 300px. However, I'm facing an ...

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

Develop a reusable block of Vue template when creating a new component

There are times when I find myself needing to repeat certain sections of HTML code in my Template just to keep it DRY. However, creating a new component and passing multiple props and dynamic data seems like too much work. Is there a simpler way to define ...

Is it impossible for both <a> and <name=""> to collaborate in HTML and PHP?

Is it possible to make both <a href works > and name="send" work at the same time within isset($_POST['send']) in this code? Currently, it's not functioning as intended. Is there a way to achieve this for both cases? The requirement i ...

Executing functions and setting element values upon loading in Javascript

I am currently working on updating a small Javascript function that assigns an active class to the parent <div> of a group of radio buttons when the page loads and also when there's a change event. The existing function looks like this: functi ...

Error code 2 in Phonegap 2.2.0 iOS file transfer issue

saricsarda2[326:15b03] Executing multiple tasks -> Device: YES, App: YES saricsarda2[326:15b03] -[CDVFileTransfer download:] [Line 313] File Transfer is currently downloading... saricsarda2[326:15b03] File Transfer has been completed with response code ...

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

Changing JSON names to display on a webpage

I am looking to modify the name displayed in a json file for presentation on a page using ion-select. mycodehtml ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" > <ion-option [value]="item" *ngFor="let item of totalfilter ...

When the user saves the changes on the pop-up window, the main window will automatically refresh

I currently have a calendar feature that allows users to create, edit, and delete appointments. When a user clicks on the new appointment button, it opens a window above the calendar interface. Once the user fills out the necessary fields and clicks save, ...

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

Crafting a sleek arrow-style stepper with Bootstrap 5 breadcrumbs

I am attempting to create a stepper similar to the one showcased in this instance. To add color to the stepper, I utilized the text-bg-success or text-bg-primary classes on the breadcrumb-item as shown below. However, the spacing between the steps appear ...

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

Screen resolution for the background image on the banner

I'm currently working on a website that can be found at this temporary link: The main banner of the site features a background image with fading text, which looks great on standard desktop screens. However, when viewed on wider screens like 1600x1200 ...

Ways to eliminate class from HTML code

Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...

Unusual Happenings with jQuery Draggable

Currently, I am experimenting with jQuery draggable to move individual letters of the word "Hello" around on the page. However, I have come across a frustrating issue. When I drag the letter H towards the right and it gets near the letters E, L, L, or O, ...

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

Having difficulty navigating to a different page in Angular 4

I'm currently attempting to transition from a home page (localhost.com) to another page (localhost.com/listing). Although the app compiles correctly, I encounter an issue where nothing changes when I try to navigate to the new page. My approach has m ...

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

When utilizing an API to render text into a div, the offsetHeight function may return 0

I'm working with a div that displays text fetched from an API call. I'm trying to implement a See more button if the text exceeds 3 lines. Here is my approach: seeMore(){ this.setState({ seeMore: !this.state.seeMo ...