My navbar is not expanding properly when toggled

I've been struggling to understand bootstrap 4 and the navbar feature is giving me a hard time. I initially managed to get the icon to display correctly, but then I must have made a mistake because now it's not showing up at all. Additionally, I can't seem to make the links dropdown as intended.

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <title>Home</title>
     <link href="compworks.css" rel="stylesheet">
    </head>
  <body>
 <div class="container-fluid">
     <nav class="navbar navbar-expand-md">           <!-- Top grandparent nav -->
        <a class="navbar-brand" href="home.html"><img src="images/logo.png" id="logo"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse"   data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="#navbarResponsive">
            <ul class="navbar-nav ml-auto">

              <li class="nav-item active"><a class="nav-link" href="home.html">HOME</a></li>

              <li class="nav-item"><a class="nav-link" href="services.html">SERVICES</a></li>

              <li class="nav-item"><a class="nav-link" href="about.html">ABOUT</a></li>

              <li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>

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

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>
htmlcssbootstrap-4

Answer №1

Make sure to include the "navbar-light" and "bg-light" classes on the nav tag for a light background color.

Also, remember to remove the "#" from the div id. Change id="#navbarResponsive" to id="navbarResponsive".

Best of luck!

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 populate HTML dropdown using AJAX

<script type="text/javascript"> $(document).ready(function () { $.ajax({ url: '/Umbraco/api/RegisterUser/GetCountry', type: 'GET', // Using GET method data: '{}', ...

javascriptjqueryhtmljsonajax

Set the value of a PHP variable with jQuery

i am currently developing a website that includes buttons, each of which triggers a Bootstrap modal containing data from a MySQL database. I am passing a variable from jQuery to execute a MySQL query inside the modal. However, the PHP variable is having tr ...

phpjquerybootstrap-4bootstrap-modal

Conceal two DIV elements if one of them is empty

My slideshow has thumbnails connected to each slide. There are 10 DIVs representing the slides like this... <div class="SSSlide clip_frame grpelem slide" id="u751"><!-- image --> <?php while ($row = mysql_fetch_array($query ...

javascriptphpjqueryhtml

Using JavaScript to create circular shapes on canvas with paint circle

I need assistance in JavaScript to create a circle and update it while removing the previous one. My current code is: <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <ca ...

javascripthtml

Eliminate odd white spacing within nested div elements in Chrome

Is there a way to eliminate the odd white space between two nested divs in Chrome? <div class="bar"> <div class="progress"> </div> </div> .bar { width: 200px; height: 6px; border: 1px solid black; ...

htmlcssgoogle-chrome

Initializing trans tags within Djangocms-text-ckeditor

I have encountered a problem while using the djangocms-text-ckeditor plugin to insert text into my pages, particularly related to translations. Even though I have included load i18n at the beginning of my code, when I switch to the source and directly ent ...

pythonhtmldjangodjango-cms

The content inside the inner div does not stretch to match the height of its parent element

I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me. The problem is that I have two child divs inside a parent div. The h ...

htmlcss

The picture is not visible outside the parent container - why is it hidden?

Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without wo ...

htmlcsstwitter-bootstrapmaterialize

Building a Dynamic CSS Grid

Today is the first time I'm reaching out for help rather than figuring things out on my own. I'm currently working on a website layout that consists of visible tiles all with equal sizes, forming a grid structure. The challenge I face is making t ...

javascripthtmlcss

Dealing with the infuriating combo of Internet Explorer, Bootstrap, and Respond.js

Currently, I am in the process of reimagining my unfinished website using the Racket programming language instead of PHP, which I have grown to not enjoy. The challenge lies in the fact that I cannot simply copy and paste HTML code; Racket utilizes S-expr ...

phpjqueryhtmlinternet-explorertwitter-bootstrap

Struggling with Implementing a Hollow Button in Bootstrap 3

Could you please review This Demo and provide guidance on how to remove the grey background color when clicking on the button? I attempted the following: .btn-hallow:hover{ background: none; color: aliceblue; } .btn-hallow.active:focus{ backg ...

twitter-bootstrapcsstwitter-bootstrap-3

The Highcharts Range Selector feature may encounter issues when used with multiple series

Currently, I am facing an issue with my highchart/highstock where I retrieve data from a PHP file. The problem arises when I attempt to use multiple series as the RangeSelector Buttons cease to function properly. For instance, in the example provided, the ...

javascriptphphtmlchartshighcharts

Send a parameter to be used as a link attribute in a pop-up box

I am seeking a way to pass a URL for my modal that relies on extracting the adder variable from the main HTML document. While I understand how to pass variables as text (using spans) to a modal, I am unsure how to incorporate a variable in an anchor <a ...

javascriptjqueryhtmltwitter-bootstrap

Display the div in all browsers except for Internet Explorer

There's a message in a div that needs to be displayed on the webpage, but it's not showing up on Internet Explorer. Even after attempting the usual , as well as other recommendations, the message still remains hidden. What could I be overlooking ...

javascriptcssinternet-explorer

Is a responsive mega menu with rollover effects available for Bootstrap?

Looking to develop a responsive megamenu for bootstrap 3, I recently came across one that caught my eye: I decided to implement it into my own project at However, I encountered a major issue with the menu functionality on desktop devices, as it requires ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

What is the solution to adding values from a counter?

I am trying to create a JavaScript counter: function animateSun() { var $elie = $("#sun"); $({ degree: 0 }).animate({ degree: 360 }, { duration: 190999, easing: 'linear', step: function(val) { now = Math.round ...

javascriptjqueryhtmlcsscounter

Is it feasible to access the PHP code of a website?

Is it within the realm of possibility to access and view the PHP files and codes of other websites? In other words, can individuals without access to the files see my PHP codes? If this is a concern, what is the most effective way to safeguard against it ...

phphtmllinuxsecurity

Pictures piling up vertically instead of lining up horizontally

Is there a way to display these images in one row horizontally instead of on separate lines? The text under the images is causing them to wrap because of the width. How can I ensure that the title text has the same width as the image? <img src="image.p ...

html

Is there a way to remove the jQuery .css() upon clicking a different button?

I am currently working on a jQuery switch where I want the clicked button to revert back to its original state when another button is clicked. Additionally, I want the 'OFF' button to be automatically clicked first when the page loads. Despite tr ...

javascriptjqueryhtmlcss

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

javascriptcssflexboxmaterial-ui