Bootstrap does not toggle the menu

My menu won't open when clicked and I can't figure out why. I've searched through various posts on StackOverflow and other websites, but still haven't found a solution. I may be new to Bootstrap, but I'm eager to learn.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


 <header>
  <div class="navbar navbar-default navbar-fixed-top text-uppercase">
    <div class="container">
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand">My Blog</a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-targert=".navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">Register</a>
          </li>
          <li>
            <a href="#">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<footer></footer>

I would greatly appreciate any guidance! Thank you!

Answer №1

There was a small error in your code: it should say "data-target" instead of "data-targert" :)

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Once I corrected this, everything started working perfectly!

Answer №2

Check out this example of a dropdown toggle menu:

 <ul class="nav navbar-nav navbar-right">
                <li class="dropdown profile_menu">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle><span>Welcome</span><b class="caret"></b></a> 
                    <ul class="dropdown-menu">
                        <li><a href="@Url.Action("Index", "Manage")">My Account</a></li>
                        <li><a href="#">View Profile</a></li>
                        <li><a href="javascript:document.getElementById('logoutForm').submit()">Logout</a></li>
                    </ul>
                </li>
            </ul>

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

PHP - Including Header Tags within the Body section

Using pgp require, I noticed that it shifts the head content from the included file into the body tags. I have looked into similar questions but haven't found a solution to my specific issue. index.php: <!DOCTYPE html> <html> < ...

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

Styling a disabled button in ASP.NET using CSS

I've encountered an issue with my asp.net button that is disabled based on specific c# code conditions. The button, known as btnPrevious, is assigned the css class below: .btnBlue{ background: rgb(40, 108, 244); /* Old browsers */ background:linear-g ...

Potential image positioned to the left of a detailed description

A Meteor client template helper contains an array of objects {image: url, label: description}. The URL can either point to a valid image file in the public directory or be the string 'non'. The description can range from a few words to several ...

Looping through mysql data horizontally within a div tag

Looking for assistance to create a content loop similar to the one on this website? I attempted to use a while() loop, but it ended up displaying vertically without using a table. I suspect this page utilizes thumbnails. What I aim for is to have the it ...

The CSS for selecting the input[type="submit"] element is not functioning as expected

I apologize but I am encountering an issue with my .css stylesheet that covers styles for my input type buttons as shown below. input[type="submit"] input[type="submit"]:hover input[type="submit"]:focus The first three selectors are functioning well, how ...

Scaling CSS images to fit within a specific area without distorting them

Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...

How to Position Input Fields over an Image Using CSS

I am working on positioning input fields over an image to allow data entry directly onto the image itself. https://i.sstatic.net/jW4iM.png Currently, I have a series of input fields (shown above) and three images with different squares on them. My goal is ...

An undefined PHP index error was encountered by Ajax, while the other one did not face the same issue

I encountered an issue with ajax where I am receiving an undefined index error on my variables when making a call. Strangely, I have other ajax calls functioning perfectly fine across my website except for this particular one which is giving me troubles. I ...

Sending a post request to a Spring controller with ajax: Step-by-step guide

I am having trouble sending a post request to the spring controller using ajax. It seems that something is not working correctly. If anyone can help me figure out what I did wrong, I would greatly appreciate it. $("#myprofile").on('submit&ap ...

Verify the text file for any data, and if it contains any, display it on the web browser using JavaScript

I have a program in C that works with a temperature sensor. It creates a file to store the temperature and indicates whether it falls within specific values. I want to display this data on a web browser and update it every 5 minutes. I'm looking for ...

The camera continues to move smoothly after the static-body effect has been activated

I recently implemented A-Frame physics using this library, and encountered an issue where applying static-body to the a-mixin voxel in the Minecraft demo still allowed my character to move through the box. My camera is configured with universal-controls f ...

What is the best way to horizontally align a form input in MatBlazor?

How can I align the form inputs in the center of this image? The GridLayout I am using is defined here: and the form elements are defined here: https://i.sstatic.net/OlC7D.png This is my code attempt but it seems like something is missing: <div class ...

Why is my text becoming centered on desktop view?

One curious issue I encountered while working with Bootstrap 4's accordion on this page is that the text of the last item in the accordion is mysteriously centered. Despite not using text-center or having any CSS properties like text-align: center spe ...

Troubleshooting: Angular 13 input radio not recognizing checked condition

Storing selectedKitchenId in localstorage, and checking if selectedKitchenId === kitchen.id to determine which radio button should be selected. Cannot figure out why the checked condition is not working as expected, even though when I use a strong tag to d ...

The design template is failing to be implemented on my personal server utilizing node.js

I've encountered an issue while developing the signup page on my local server using Bootstrap 4. The CSS is not getting applied properly when I run it locally, although it displays correctly in the browser. Can someone explain why this is happening? ...

Override the default Bootstrap 5 styling for nav-links

I recently encountered a problem while trying to customize the appearance of the nav-link elements in my Bootstrap 5 navbar. I initially thought I could simply override the existing styles by targeting the class in my CSS. However, my attempts were unsucce ...

Are there drawbacks to utilizing large integer values as array indexes?

Simply put. We are discussing javascript here. I am wondering about the potential performance drawbacks, memory issues, and so on when using high value integers as array indexes instead of low value ones. Some programming languages allocate enough memory ...

Create numerous collapsible elements using the ui.bootstrap and AngularJS frameworks

Currently, I am working on implementing the ui bootstrap collapse feature. The static single or double collapse system works perfectly fine, but for my specific design requirements, I need to create collapses using ng-repeat. Unfortunately, I am unsure how ...

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...