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

Unable to display text overlay on image in AngularJS

I am experiencing an issue with displaying captions on image modals. .controller('HomeController',['dataProvider','$scope','$location', '$modal', '$log', 'authService', function ...

javascriptangularjsmodal-dialog

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

javascriptangularjs

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

Ways to activate side-to-side scrolling?

Here on this specific page, I am looking to showcase the SPECIAL and RECOMMENDED sections together in a single line with horizontal scrolling. This is my current CSS: .box-product { width: 100%; overflow: auto; } I have attempted implementing it like th ...

htmlcss

Is there a unique identifier associated with web explorers?

I'm conducting an experiment and I've noticed that Google is able to detect that it's the same computer, even when I change various settings. It seems to be identifying the explorer with a unique ID or something similar. I have tried everyth ...

javascriptseleniumgoogle-chromeselenium-webdriver

JavaScript method for altering the values of variables

Having a small issue with my JavaScript function. Let me tell you what's going on: var intervalId = setInterval(function() { var value = parseInt($('#my_id').text(), 10); if(value > 0) { clearInterval(intervalId); console.log ...

javascriptjquerysetinterval

Guide to streaming audio files using vue.js

I am attempting to incorporate an audio file into my vue.js project using the following code: import sound from '../../recordings/sound.mp4' const audio = new Audio(sound) audio.play() Although this method works perfectly fine, I have encounter ...

javascriptvue.jsweb-audio-api

Checking for the existence of data in a MySQL table using Node.js resulted in an error message: "TypeError: res.send is

I am currently attempting to verify the existence of data in a mysql table. Upon doing so, I encountered an error indicating TypeError: res.send is not a function. The mysql table contains ample data with three columns, each specified as varchar(45), alon ...

javascriptjquerymysqlajaxnode.js

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

javascriptjqueryhtmlajax

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

Achieving centered positioning for the 'row' class in Foundation 5, regardless of browser size

While viewing on desktop, the body is centered which is ideal. However, resizing the browser causes it to stretch to fit the full width and I want to avoid this. Regardless of the browser size, I want the first div with the "row" class to be centered with ...

htmlcsszurb-foundation

Step-by-step guide on how to load an Ext JS tab after clicking on it

I have an Ext JS code block that creates 4 tabs with Javascript: var tabs; $(document).ready( function() { fullscreen: true, renderTo: 'tabs1', width:900, activeTab: 0, frame:true, ...

javascriptjqueryextjs

The process of batch file conversion and how to effectively utilize it

I am facing an issue with a small batch script that I have been working on. The purpose of this batch script is to execute a Javascript file that converts an XML file to a csv file, followed by running a Python script to analyze the created csv file and ge ...

javascriptpythonwindowsbatch-file

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

applying different styles to various elements

As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

jqueryhtmlcssrandom

Retrieve Element By Class Name in JavaScript

How can I modify the border color at the bottom of the .arrow_box:after? Javascript Solution document.getElementsByClassName("arrow_box:after")[0].style.borderBottomColor = "blue"; Despite trying this solution, it seems to be ineffective! For a closer ...

javascripthtmlcss

How can socket listener be dynamically added in node.js with socket.io?

Assuming you have a basic socket.io configuration set up: var app = require('http').createServer().listen(80,'127.0.5.12'), io = require('socket.io').listen(app); session = require('./local_modules/session.js'); / ...

javascriptnode.jsscopesocket.io

Condensed JQuery condition code for "if" statement

This piece of code is designed to sequentially display 10 questions and control the visibility of each question using the CSS class .hideme. It also sends metrics data to Google Analytics. Although it functions properly, I feel like the code is too leng ...

javascriptjqueryif-statementfor-loop

specifying the input value pattern restriction in HTML5

Struggling to set a minimum and maximum value for an input text box. Despite my efforts, I haven't been able to make it work. How can I resolve this issue? The current pattern restricts values up to 10 but I need to allow values from 100 to 100000. Wh ...

html

Guide to storing user data retrieved from the LinkedIn API into an Angularjs controller with the help of a personalized service

Hey there, I'm currently diving into Angular and facing a challenge with saving user information from LinkedIn API to the controller's scope without directly passing it to my custom service. It seems like that might not align with the best practi ...

javascriptangularjslinkedin-api