The menu bar button refuses to reveal its hidden options

Having some trouble with my dropdown button as a junior web developer. Resizing the screen causes the dropdown to not function correctly. Any help would be appreciated!

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">
          <img src="http://placehold.it/150x50?text=Logo" alt="">
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <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
                <span class="sr-only">(current)</span>
              </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="services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="form.html">Sign In/Sign Up</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
htmlcssbootstrap-4frontend

Answer №1

Have you officially disclosed this information?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

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

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

htmlcssangularjstwitter-bootstrapangularjs-ng-repeat

What is the best way to adjust a <textarea> to fit a multi-column layout?

Here's a cool way to display text in columns: <div class="content-box" style="column-width: 8em"> <p>blah blah...</p> <p>blah blah...</p> <p>blah blah...</p> </div> However, when it comes to the ...

htmlformscssfrontend

The Bootstrap navbar branding element vanishes upon navigating away from the home page

I have recently started learning Python, Django, and Bootstrap. I am facing an issue where the navbar-brand disappears when navigating to a different page or view other than the index. In my case, the nav-brand is an image source. Below is the code snippet ...

htmldjangodjango-templatesnavbootstrap-5

Tips for separating these two words onto two separate lines

I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...

htmlcssangularjsangular-material

What is the best method for implementing page transitions between components in NextJS?

My goal is to create a form that smoothly slides to the right, similar to the one seen on DigitalOcean's website when you click "Sign up using email" here: . While the transition itself is relatively simple, I noticed that DigitalOcean uses 2 separat ...

javascriptcssuser-interfacenext.js

Updating the contents of a DIV element in a Django application

Seeking a solution to replace the current contents of a DIV with new contents using Ajax GET method. Issue is that the entire page is loading into the DIV instead of just the desired content. function updateContent(){ var data = $('#Data ...

javascriptjqueryhtmlajaxdjango

What is the reason behind the browser crashing when a scrollbar pseudo-class is dynamically added to an iframe?

1. Insert a new iframe into your HTML: <iframe id="iframe-box" onload=onloadcss(this) src="..." style="width: 100%; border: medium none; "></iframe> 2. Incorporate the following JavaScript code into your HTML file ...

javascripthtmlcssgoogle-chromeiframe

Checking the validity of an HTML tag with the contenteditable attribute set to true

Take for instance the input tag, which includes a field known as type. When type is set to "numeric", only numbers can be entered. Now, if I set a td element as contenteditable, is there a way to restrict the user from inputting anything other than number ...

javascripthtmlangular

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

cssangular

Utilizing if conditions within loops in a Jade template

Hey there. I am attempting to create a `tr` element at the start and after every 9th item. I am using the modulo operator as shown in the example above. However, if I want to include `td` elements inside that same `tr`, with an `else` condition for inst ...

htmlnode.jsexpresspugeach

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

css

Adding link styles to the <a> tag in Bootstrap 4 Alpha 3: A simple guide

The following code is quite simple: <a>This is a link</a> In a demonstration of Bootstrap 4 Alpha 2 here, the link appears blue. When you hover over it, it turns dark blue. However, in a demonstration of Bootstrap 4 Alpha 3 here, it displays ...

csstwitter-bootstraptwitter-bootstrap-4

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

javascriptcssreactjsfrontendbackend

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Currently, I am utilizing Weebly templates and working with the CSS files for my website located at www.zxentest.weebly.com. I am seeking assistance in reducing the space between the yellow banner and the faint line on either side, as well as decreasing t ...

htmlcssreduceweebly

Transfer or duplicate an SVG image from the bottom div to the top div

Is there a way to move a div from the chart_div to the movehere div? I've tried duplicating it below the current svg, but I'm having trouble targeting just the header row ('g' element) specifically. Here is the HTML: <script type= ...

javascriptjqueryhtmlcsssvg

Error 404 occurs when images are not able to load when stored in a different directory

When I encounter a custom 404 Error on my website at http://ericmuir.tk and it happens in a directory other than the home one, none of the images on the page load. I faced a similar issue with loading CSS scripts, but resolved it by using style tags which ...

htmlcsswebhttp-status-code-404

Is there a way to easily duplicate this and add a navigation bar and logo to every page?

Why is it that when I copy and paste this code into any .html document, it only runs correctly on the resources tab? The logo is only showing up on the resources page, even though it's using the same css stylesheet and html structure. <div class=" ...

htmlcssnavigationstylesstylesheet

Adding padding with and without child elements

As I work on styling a basic menu, I'm struggling to find a solution for adding padding to list items so they all have a consistent look. The challenge arises from the fact that I have an unordered list where list items may or may not contain an anch ...

css

Use column formatting for the table's body section

I have written the code below in HTML to create a table. I am looking to apply a specific style to the table body elements in a column that has been assigned a CSS class, while excluding the header columns from this style application. As an example, I hav ...

javascriptjqueryhtmlcss

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

javascriptjqueryhtmlinternet-explorer