Bootstrap 4 responsive Navbar doesn't support dropdown menus

Having trouble getting the dropdown feature of bootstrap's navbar to work. Even after changing the color to black for visibility, I still can't get the menu options to drop down when clicked. Check out the JSFiddle here.

Below is the code snippet I am using for the navbar:

<nav class="navbar navbar-expand-md topHeader">
    <a class="navbar-brand nameHeader">
        <h1 class="navbarHeader">David Mitchell Barnett</h1>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation" style="background-color: black" >
            <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.html">
                    <h3>About</h3>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="portfolio.html">
                    <h3>Portfolio</h3>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact.html">
                    <h3>Contact</h3>
                </a>
            </li>
        </ul>
    </div>
</nav>

Answer №1

After reviewing your JSFiddle, I noticed a problem with the placement of your JS scripts. It's important to first link jQuery before linking the Bootstrap JS.

Your Current Code:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

To fix this, simply switch the order like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

The link in the navigation bar is not functioning correctly

Let me break down the issue I'm facing here. The problem arises with the navigation buttons that have sub-lists nested within them (ul>li>ul). When attempting to click on these buttons, the link does not work unless I specifically click on the t ...

Is there a way to have the bootstrap dropdown open at the same position it was in before being closed?

I'm facing an issue with a bootstrap dropdown in Angular. Every time I choose an item, close the dropdown, and reopen it, it always starts back at the top of the list instead of retaining the scroll position from where it was last closed. Is there a w ...

Monitoring changes to a SCSS file

I'm feeling completely baffled. I've put in my best effort to resolve this issue. The problem lies with my SCSS file and its watcher that doesn't appear to be functioning properly. A regular CSS file is not being generated at all. Here&apos ...

Guide on aligning an image in the middle of a column element

Struggling to center an image using CSS within the same .php file as the code <style type="text/css"> div.item { height: 300px; width: 300px; display: table-cell; margin-left: auto; margin-right: auto; text-align: center ...

DIV height adds a layer of design to a website, making it visually

I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...

Creating resizable images using CSS in Bootstrap

I have a horizontal scrolling page implemented with bootstrap 5. The images all have the same height but varying widths. My objective is for the images to always fill the width of the page, so they should resize accordingly when the browser window size cha ...

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

What is the best way to highlight titles that are unique but still prominent?

.test{ display:none; } .title:nth-child(odd){ background: #ddd; } <div class='title'>lorem</div> <div class='title'>lorem</div> <div class='title test'>lorem</div> <div class='tit ...

Challenges in aligning images side by side within an XSLT document

My XML file is currently being transformed using XSLT to display tables, but I would like these tables to be displayed next to each other in rows of three columns. However, the current output shows them displaying one after another vertically. Here's ...

Issue with the functionality of a checkbox input placed inside a label

I successfully created a functioning checkbox: <div class="custom-control custom-switch mt-3 ml-4"> <input type="checkbox" class="custom-control-input" id='G1'> <label class="custom-cont ...

Tips for including multiple spaces within a cell of a table

I've come across an issue while working on a table and attempting to insert text with multiple spaces. For example, I want to add the text HELLO<1stSPACE><2ndSPACE>WORLD. However, when I enter it as HELLO WORLD, it only displays with a si ...

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

Navbar fails to display any links following the installation of Bootstrap 4 alpha 6

I've noticed that the navbar has been changed from the alpha 5 version, but for some reason my previously functioning navbar is now broken. When I resize the page to XS, the hamburger icon appears along with the links, but when it goes beyond XS, all ...

Button to scroll down

I have successfully implemented a #scrolldownbutton that scrolls to the first component. However, I am now attempting to modify it so that when the button is clicked, the page smoothly scrolls within the viewport and stops at the partially visible componen ...

Displaying CSS image slideshow images side by side

Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on i ...

Exploring the semantics of CSS documents

Picture this scenario: I have a massive CSS file with over 40,000 lines, like the one found at https://cdn.jsdelivr.net/npm/[email protected] /dist/semantic.css I need to sift through this file and specifically search for class definitions that inclu ...

Can I trust PHP to create my stylesheet using file_put_contents securely?

In an effort to build websites that are easy to maintain, I came up with a solution to use PHP to call in HTML lines and generate a stylesheet with only the necessary CSS. This way, I can make changes to the CSS once and have it apply to multiple elements. ...

Is there a way to align an image to the center using the display grid property?

Having some trouble centering an image within a 'display: grid' layout. Screenshot I attempted to use 'align-items' but it didn't seem to work either. Code: <section style="padding-top: 30px;"> <h4 sty ...

How can the scrollbar functionality and grey border box/outline be removed from the canvas?

I am currently developing a Django project where I have two canvas elements stacked on top of each other. The top canvas has functionality that allows me to mouseover it and reveal an image loaded into the canvas below. While this functionality works well, ...

Why isn't my content appearing correctly on different pages?

This ecommerce site is my very first project using React. I have created pages for Contact, Login, and more. The footer and other components display correctly on the home page, but when navigating to other pages, the content appears shortened. For referen ...