Issue with displaying Bootstrap 3 dropdown menus

I've been experimenting with the latest Bootstrap 3 and everything seems to be working well, except for the dropdowns I'm trying to create. Please let me know if anyone has any insights into what I might be doing incorrectly. Here is the code I'm working with:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tutorial</title>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-brand">Tech Site</div>
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a>

                            <ul class="dropdown-menu">
                                <li><a href="#">Twitter</a></li>
                                <li><a href="#">Facebook</a></li>
                                <li><a href="#">StumbleUpon</a></li>
                                <li><a href="#">Google+</a></li>
                            </ul>

                        </li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

Answer №1

Give this a shot:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-brand">Your Site</div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Main</a></li>
            <li><a href="#">Updates</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Platforms <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Instagram</a></li>
                <li><a href="#">LinkedIn</a></li>
                <li><a href="#">Pinterest</a></li>
                <li><a href="#">YouTube</a></li>
              </ul>
            </li>
            <li><a href="#">Details</a></li>
            <li><a href="#">Support</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- JAVASCRIPT FILES -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
  </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

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

Prevent children from extending outside the boundaries of their parent

I am facing an issue with my page layout that includes a sidebar. The content in the sidebar is overflowing the page, so I attempted to use CSS properties like overflow-y: hidden and max-height: 100vh on the main element, as well as overflow-y: auto on the ...

Carousel King with never-ending content

Is there a way to create a carousel in Bootstrap 4 where the carousel items are not separated but visible concurrently? In other words, can carousel item 2 and 3 appear while the first item is still visible? I've included an image for reference: http ...

How can I make my div change color when the check-box is selected?

I have a dynamic table in my web application that is populated with data from a database. Each row in the table represents multiple time slots for a specific date. I am working on a feature where the background color of a time block can be changed if a che ...

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

Using the Table-multiple-sort feature in boostrap-table is not functioning properly when there are multiple tables present on a single page

I have implemented bootstrap-table along with the extension table-multiple-sort. The issue I am facing is when I include two tables on a single page (with the second table within a modal window), the multisort feature does not seem to work on the second ta ...

Checking if children have certain text using jQuery

My task involves filtering an HTML table. In order to accomplish this, I have created an 'each' callback for all 'tr' elements and check if any of their children contain a specific pattern. $("#filter").keypress(function() { var fi ...

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

The left side of my image doesn't quite reach the edges of the screen as desired

Even after setting the padding and margin in the parent container to 0, the image is still not filling to the edges. Here is the image. This snippet of code shows my JavaScript file: import styles from './css/Home.module.css'; export default fun ...

Step-by-step guide on arranging/placing/styling two div elements next to each other

I'm facing an issue with my CSS and HTML. I can't seem to get the 2 footer items to display on the same line. Is there a problem with how I've structured my divs and styles? Any suggestions for improving the code are greatly appreciated. I& ...

How can I achieve this particular design using flexbox?

Check out the image here: . I'm struggling to understand the examples and live flex configurators. Are they only showing simple examples, or am I just not grasping it? Is it possible for me to use media queries to hide a4 when the screen is less than ...

Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby: <div className='mainContent'> <section className='contentSection'> <h1 className='header'>Heading</h1> <div c ...

Enable the script tag with the type "module" only under certain conditions

Attempting to dynamically enable script tags in HTML using the code below does not yield the expected results. function loadScript() { document.querySelectorAll('script[type="text/skip-hydration"]').forEach((script) => { script ...

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

"Marquee animation functions correctly on the emulator but fails to display on the physical

Greetings! I recently incorporated a marquee tag into my application, and it functions properly in the Android simulator. However, once I install it on my device, the marquee does not display. Below is the code I used for the marquee: <marquee behavi ...

Json Swagger Editor: Error - Undefined

There is an undefined error in rendering when using the Swagger Editor. Here is the code snippet: swagger: '2.0' info: version: 1.0.0 title: AccountBalance host: localhost:2625 basePath: /accountbalance schemes: - http - https consumes: ...

Having trouble getting the text on the menu to align to the right side

I have a website at: I am attempting to shift the menu so that the links appear on the right side of the window instead of the left side. I have experimented with various text-align: right; properties, but none of them seem to be effective. I was able t ...

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

Generating image alt tags based on the page title in real-time using PHP

Is there a way to automatically generate image alt text using the current page title in PHP? I am working on a website called and there are too many images to manually fill in alt text for each one. Thank you, Ricky ...