Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly.

Below is the code that I have been working with. Thank you!

 <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
      <a class="navbar-brand" href="/">
        <img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
      </a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Persoane Fizice</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Consultanta</a>
          </li>
             <li class="nav-item">
            <a class="nav-link disabled" href="#">Cyber Intelligence</a>
          </li>
             <li class="nav-item">
            <a class="nav-link disabled" href="#">Blog</a>
          </li>
             <li class="nav-item">
            <a class="nav-link disabled" href="#">Contact</a>
          </li>
        </ul>

      </div>
    </nav>

Answer №1

inspect your <header> and insert the following:

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

I tried your code and it worked perfectly for me.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
          <a class="navbar-brand" href="/">
            <img src= {% static 'img/lastlogo.png' %} width="463" height="72" class="d-inline-block align-top" alt="">
          </a>
    
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Persoane Fizice</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Consultanta</a>
              </li>
                 <li class="nav-item">
                <a class="nav-link disabled" href="#">Cyber Intelligence</a>
              </li>
                 <li class="nav-item">
                <a class="nav-link disabled" href="#">Blog</a>
              </li>
                 <li class="nav-item">
                <a class="nav-link disabled" href="#">Contact</a>
              </li>
            </ul>
    
          </div>
        </nav>

discover more about how to utilize navbar

Answer №2

After refreshing the server, everything is up and running smoothly now. I noticed that some items from the list were disabled, but I have removed them and now the system is working perfectly.

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

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

Responsive design in Android does not function as intended

My goal is to create a responsive design for my website, but I am encountering issues with importing the CSS files into the HTML. When I try to view the site in both the Windows version of Chrome and the Android version, all I see is a white screen. I am c ...

Iterate using jQuery through all child div elements

<div id="SelectedSection" class="selected"> <div class="sec_ch" name="7"> <div class="sec_ch" name="8"> <div class="sec_ch" name="9"> <div class="sec_ch" name="11"> <div class="clear"> </div> </di ...

Utilize Flexbox to create a layout with 3 divs, organized into two columns where one column

I am attempting to transform <div></div> <div></div> <div></div> Three consecutive divs into the following format. Div 1 is red, div 2 is green, and div 3 is blue. I have achieved this using floats, like so: .div1 { ...

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

Attempting to squeeze a lengthy word into a small span

Apologies for my poor English. I tried searching for an answer online but couldn't find a solution. Maybe I'm just not able to figure it out myself. All I need is to make those long words fit inside a button. This is how it currently looks. My ...

Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...

Navigating the world of date pickers: a deceptively easy challenge

Take a look at this fiddle example to get started: http://jsfiddle.net/1ezos4ho/8/ The main goals are: When a date is selected, it should be dynamically added as the input value, like <input type text value="date selected".... Update: <s ...

Synchronize MySQL database structure with HTML5 local storage to enable querying

After researching HTML5 local storage, I am considering mirroring a MySQL database's structure for use in an application that requires a large amount of data for a single user. Why would I want to do this? As a web game developer in my spare time, I ...

The tab component is failing to load due to an issue with the Bootstrap tab

I've created a page displaying different locations with two tabs - one for Google Maps and another for weather. For example, take a look at this location: The issue I'm facing is that when switching between the tabs, they don't load fully. ...

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

How to integrate VLC media player into an HTML webpage

I'm currently struggling to incorporate a VLC player into a website. What is the most effective method to achieve this task? I need to stream a video file using VLC and display it on the webpage for other users who are logged into my site to view. I&a ...

The CSS styles can vary depending on the web browser being used

Require assistance with my CSS. I designed an HTML/CSS widget on Blogger using my own expertise, but now facing some issues. The trouble arises with the image on the front left in the code. While it displays correctly on Google Chrome, aligned with the te ...

Encountered a MySQL error while attempting to insert an image into the database

I have a task to work on a website where users can upload product images that will be stored in a MySQL database. The code for my HTML form is: <FORM action="testimage1.php" ENCTYPE="multipart/form-data" method="post"> <div st ...

Broken links detected in the Full Page Navigation menu on a one-page website

The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...

Activate all inactive input and selection elements

I need a solution to enable all disabled input and select elements before submitting the form in order to retrieve the values of those disabled elements. Here is what I have tried: function enable() { $('input[type="text"], input[type="chec ...

Retrieving information from a form containing a list of numerous values

Thank you all for taking the time to review my code. Unfortunately, I couldn't solve the issue until I went through more code and redid everything. Eventually, I found the solution using PHP for the form: Here's my HTML form (some descriptions a ...

What is the best way to create a JavaScript animation for altering the width of a div element?

Need help with creating a dynamic poll chart based on YES and NO votes? Check out this project where you can visually see the results by clicking HERE. Looking to add some animation effects to your poll? You can achieve a smooth transition using CSS with ...