Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning properly. Can someone help me identify where the issue lies?

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="css/jquery-3.5.0.js"></script>

    <div class="container-fluid mt-3 p-0">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#" id="navbaritem"><span style="color:skyblue" >FİRMA</span> ADI</a>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#nvbCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26564956564354084c5566170817100816">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
javascripthtmlcssbootstrap-4

Answer №1

Creating a Bootstrap 4 Navbar

If you haven't added any menu items or applied the collapse class to them, you may be wondering what the functionality is and what it displays.

Give this a try and insert your content within it.

<div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin:24px 0;">
  <a class="navbar-brand" href="#" id="navbaritem"><span style="color:skyblue" >COMPANY</span> NAME</a>
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#Mymenu" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse collapse" id="Mymenu" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="">menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">menu 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">menu 3</a>
      </li>
    </ul>
  </div>
</nav>
</div>

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

Changing a get request to a post request: A step-by-step guide

I have been utilizing the following script: $(document).ready(function() { $("#test-list").sortable({ handle : '.handle', start: function(){ $("#success-result").html("loading...."); }, update : function ( ...

javascriptarraysajaxcodeigniter

What is causing the data in the hierarchy table to be invisible?

I am attempting to build a hierarchical table using Vue.js as the foundation. However, I want the table to remain hidden with no data displayed. The issue seems to be within this section of code: <tr v-if="item.childrenVisible" v-for="chi ...

htmlvue.jstreehierarchical-data

Learn how to effortlessly move a file into a drag-and-drop area on a web page with Playwright

I am currently working with a drag-zone input element to upload files, and I am seeking a way to replicate this action using Playwright and TypeScript. I have the requirement to upload a variety of file types including txt, json, png. https://i.stack.img ...

javascripttypescriptfile-uploaddrag-and-dropplaywright

Why is my update with upsert: true not working in Express and Mongoose?

var logs = [{ mobilenumber: '1', ref: 3, points: 1000, ctype: 'mycredit', entry: 'sdfsdf', entry: 0 }, { mobilenumber: '1', ref: 6, points: 2000, ctype: 'mycredit', ...

javascriptnode.jsmongodbexpress

Unable to add padding to <b> tag

Can anyone explain why the padding-top property is not taking effect for the <b> tag? Check out this link <b>hello world</b>​ b { padding-top: 100px; } ​ ...

css

Accessing HTML elements that are created dynamically in AngularJS

I am facing an issue where I cannot access a function within a newly created DOM element. Despite my best efforts, I can't seem to figure out what is causing this problem. $scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, ser ...

javascriptjqueryhtmlangularjsgoogle-visualization

Resolve feature for UI routes fails to function upon refreshing the page

My app utilizes UI Route for view routing. When accessing /berlinerliste/, a function is triggered to display an array of objects. If one of these objects is clicked, the view changes to /berlinerliste/{id}/ and shows the details of that specific object. ...

javascriptangularjsangular-ui-routerresolve

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

`How can I integrate jQuery UI using Webpack in my project?`

I recently initiated a fresh project utilizing React Slingshot and am experimenting with integrating jQuery UI accordions. I've included the jQuery UI plugin using NPM with the command npm install --save jquery-ui. From what I comprehend, Webpack auto ...

javascriptjquery-uireactjsnpmwebpack

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

I am trying to send an id argument to a child controller using Angular's $broadcast method, but despite my best efforts with the code below, I can't seem to make it work. Any suggestions on what might be incorrect in my implementation? ParentCtr ...

javascriptangularjs

Implementing Vue data binding with JavaScript objects

I have been tinkering with a JavaScript object that I want to connect with a Vue view. When I trigger a function to update this JavaScript object using AJAX, I expected Vue to automatically sync up and refresh the view. However, it seems like the binding ...

javascriptajaxvue.js

update the value of a global variable within a jQuery function

Currently, I am facing an issue with a global variable in jQuery. Here is my code snippet: var namep = ''; $("#page2").bind('pageshow', function (event , data) { var perso = $(this).data("url").split("?")[1]; perso_name = perso. ...

javascriptjqueryjquery-mobilecordova

Iterate through and remove elements within an array containing objects

Within my Vue.js application, I am working with an array of objects that I need to iterate through and display in the web browser. The array consists of four objects, but I only wish to show three based on a user's preference setting stored in a varia ...

javascriptarraysvue.js

Why is it that only one of these .php functions is functional?

I'm having some trouble getting my PHP results to display in an HTML table. The first part of my code successfully retrieves the data I need, so I believe the issue lies in the second section where I attempt to format it into a table. Below is the sni ...

phphtml

Error: Cloudant encountered a problem processing your request

Why is my attempt to upload JSON objects into a Cloudant database resulting in a "400 bad request" error? pos = { 'lat': position.coords.latitude, 'long' : position.coords.longitude }; $.ajax({ type: "POST", ...

javascriptjsonpostcloudant

A more intelligent approach for generating JSON responses using Mysql

Here is the code I have on my server side using Node.js: var mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'SOMEUSER', password: 'SOMEPASSWD', database: 'SOMED ...

javascriptmysqljsonnode.js

Utilizing the .fadeToggle() function to create a fading effect for text, which fades in and out

I am on the verge of achieving my goal, but I could use a little more assistance with this. $('.change').hover(function() { $(this).fadeToggle('slow', 'linear', function() { $(this).text('wanna be CodeNinja' ...

javascriptjqueryhtml

Socketio: Issue: Isolated surrogate U+D83D is not a valid scalar value

I've been experiencing frequent crashes with my node.js server recently, all due to a recurring socket.io error. It seems that the client may be sending invalid UTF strings, causing an error in the utf8.js file. I'm getting frustrated with the co ...

javascriptnode.jsexpresssocket.io

The JavaScript confirm function will provide a false return value

Is it necessary to display a confirmation message asking "Are you sure ..."? I have implemented the message, but the function return false; is not working when the user clicks NO. <script> function confirmDelete(){ var answer = confirm("Are you su ...

javascriptconfirm

Looking for a way to automatically update your JavaScript code on your Minecraft (Bukkit)

One of my clients has requested a website design that includes a player display for each server, updating every five seconds. I'm not sure where to start with this task. Below is an example for reference. Any guidance on how to achieve this would be g ...

javascriptphpajaxminecraftbukkit