Issue with Bootstrap Dropdown menu: No dropdown list is being displayed

I am having an issue with the code snippet extracted from the Bootstrap website. Everything seems to be working fine, but when I click on "See Product", nothing shows up.

    <!DOCTYPE html>
<html>
<head>
    <title>Omicron.com</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <style>
/*#MostUpperGreyLine img{
    width: 100%;
    min-width: 10px;
    height:auto;
}*/
#Header-New img{
    width: 100%;
    min-width: 10px;
    height: auto;
    position: relative;
    top:10px; 
}

</style>
</head>
<body>

    <!--<div id="MostUpperGreyLine">
        <img src="MostUpperGreyLine.png" alt="No Green Header Found!">
    </div>-->

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Omicron.Inc</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                ...
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    <div id="Header-New">
        <img src="Header-New.png" alt="Header not Found!">
    </div>  


</body>
</html>
htmlcssdrop-down-menu

Answer №1

Ensure that you have jquery.min.js and bootstrap.min.js or bootstrap.js files properly linked in your html code. Refer to the basic template

Just before closing the </body> tag, include the following script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Double check that the bootstrap.min.js file is located within the js folder of your project

Answer №2

 <!DOCTYPE html>
<html>
<head>
    <title>Omicron.com</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
/*#MostUpperGreyLine img{
    width: 100%;
    min-width: 10px;
    height:auto;
}*/
#Header-New img{
    width: 100%;
    min-width: 10px;
    height: auto;
    position: relative;
    top:10px; 
}

</style>
</head>
<body>

    <!--<div id="MostUpperGreyLine">
        <img src="MostUpperGreyLine.png" alt="No Green Header Found!">
    </div>-->

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Omicron.Inc</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Our Applications<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">See Products <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    <div id="Header-New">
        <img src="Header-New.png" alt="Header not Found!">
    </div>  

 
</body>
</html>

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

Equal-height rows and columns using Flexbox

I've been working on a row layout with two columns, each set to 50% width. The left column contains an image, while the right column displays text. Here is my HTML: .row{ display:flex; ...

htmlcssflexbox

Creating dynamic stripes on MUI LinearProgress for lively animations

I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated. Here is the code snippet I have: import React, { FunctionComponent } ...

cssreactjssassmaterial-ui

Ways to include a right arrow symbol for sub-child items and a downward arrow for child menu options

I have a php form that generates a drop-down menu using php mysql. The current menu is simple, but I would like to enhance it by adding a right arrow for sub-children and a down arrow for child menus using css. Unfortunately, I am unable to modify the css ...

phpjqueryhtmlcssmysql

What could be causing my CSS to unexpectedly cease functioning in my PHP project?

Recently, I've encountered an issue where my custom external CSS file stops working unexpectedly. Initially, when I copy the CSS code to a new file, it starts working again. However, after some time, it stops functioning once more. I'm using Boot ...

phpcssbootstrap-5

What approach should I take, CSS or javascript/jQuery, to create a 3D effect for my website's navigation bar?

Many companies seem to have a unique design element where the grey bar on top appears slightly "rounded" rather than flat. I assume there is more to achieving this effect than just using background: grey in CSS. How can I make it look like it protrudes s ...

javascripthtmlcssweb

When an HTML page is hosted on an external server, its formatting may

I recently put together an HTML page that incorporates some CSS and two simple highcharts from highcharts.com. After testing the page on my local machine and being satisfied with the outcome, I transferred it to a server on our internal network to make it ...

htmlcsshighcharts

Using CSS Flex to style text that has been transformed

I'm attempting to achieve a specific date display effect, but I'm running into some difficulties. Despite using flex and text transform, I can't seem to get rid of the extra width on the right side of the year. Here's my current outcom ...

css

Deleting an element from an HTML page with jQuery

Hi there, I'm just starting to learn about jQuery. Below is an example of a list element I have: <ul> <li> <a href="abc">ABC</a> </li> <li> <!-- This is the element I want to get rid of --&g ...

jqueryhtmljquery-selectors

The parent div in my code contains a child span element. I then created a new div and appended a child span to it. Surprisingly, when I attempted to add the span to its parent

ist ...

javascripthtmlcss

Footer displays within the content section

Currently, I am utilizing Next.js and antd's layout components to create a dashboard-style page using their Layout component. However, I have encountered two issues related to styling (CSS) in this setup: Footer appearing within the Content: I am wo ...

htmlcssreactjslessantd

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

htmlangulartypescriptangular-materialeventemitter

The table is too wide for its parent mat-nav-list, stretching to 100%

Here is the code snippet I am using to display a table inside a mat-nav-list: <mat-nav-list> <table> <tr>Node Information</tr> <tr> <td>Name</td> <td *ngIf="activeNod ...

htmlcssangularangular-material

CSS transition across different browsers

I'm encountering an issue with the code provided below Here is my stylesheet .h_w:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); ...

htmlcss

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

javascripthtmljquerytinymce

What are alternative methods for creating a two-column form layout that do not involve the use of

When generating the html form, I am looping through the form variables as shown below: {% for field in form %} {{ LABEL }}{{ INPUT FIELD }} The labels and fields are going through a loop. A simple one-column layout can be generated using: {% for field ...

javascripthtmlcssformswebforms

Encountering an error that states "this.push is not a function" when trying to select the 2nd or 3rd option

My goal is to extract elements from a drop-down menu and populate a list box based on the selection. The selected value from one list box should then be transferred to another list box, specifically from Available to Selected. However, while selecting Deve ...

htmlangularjsarrays

Tips for utilizing z-index effectively in conjunction with a sticky header

I'm having trouble getting my footer to display correctly on top of a sticky header. Even though they are both in the same level markup, it just doesn't seem to work as expected. Interestingly, a snippet of code below appears to be working, but ...

htmlcssz-index

Update the contents of a div element with JavaScript and PHP combo

When I click on the following div, I want to replace it with a similar one from file.php. The div tag in question is: <div style="display: none;" id="extra" class="container2" xml:id="page"> <div class="title"> <h2>Stuff to check out< ...

javascriptphpjqueryhtml

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

Hello there, I am just starting out with web development and learning about Vue.js. In Vue 3, the recommended way to import CSS files from different packages is as follows: Method 1: Import directly in app.js //app.js import '../css/app.css'; i ...

javascripthtmlcssvue.js

The parent is relatively positioned and its child is absolutely positioned and floated to the left

I'm currently working on a design where I have a group of parent containers with the float left property applied. Inside each parent container, there is a child div with position absolute defined within them. Here's an example: <div class="wr ...

htmlcsscss-position