convert a list of options into a dropdown selection menu

Is there a way to turn a regular menu into a dropdown menu for small devices without modifying the HTML code? I have a responsive design, but I'm not sure how to add that 'hamburger menu' style.

Note: I am unable to make changes to the HTML

Here is the updated HTML code:

    <div id="pai" class="row">
  <div class="col-xs-12 col-xs-10">
    <div class="menu">
     <nav>
     <div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
      <div class="container-fluid">

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>

         <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="menu" class="nav navbar-nav">
          <li class="LogoPosicao">  <img class="img-responsive" id="imagemBBlogo"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
          <li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
          <li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
          <li><a class="Quebra">|</a></li>
          <li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
          <li id="contatoLI"><a class="Contato" href="#Contato-Site" button  type="button"  data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
        </ul>
        </div>
      </div>
    </div>
    </nav>
  </div>

</div>
javascriptjqueryhtmlcss

Answer №1

Accomplished the task.

:

<div id="pai" class="row">
  <div class="col-xs-12 col-xs-10">
    <div class="menu">
     <nav>
     <div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
      <div class="container-fluid">

           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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>

         <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul id="menu" class="nav navbar-nav">
          <li class="LogoPosicao">  <img class="img-responsive" id="imagemBBlogo"  src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
          <li><a class="Entenda" href="#" visibility="hidden">UNDERSTAND</a></li>
          <li><a class="SemJuros" href="#" visibility="hidden">NO INTEREST</a></li>
          <li><a class="Quebra">|</a></li>
          <li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
          <li id="contatoLI"><a class="Contato" href="#Contact-Site" button  type="button"  data-toggle="button" aria-pressed="false" autocomplete="off">CONTACT</a></li>
        </ul>
        </div>
      </div>
    </div>
    </nav>
  </div>

</div>

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

Identifying when several asynchronous JavaScript $.ajax requests have finished

I have a JavaScript function that runs a loop and makes asynchronous AJAX calls. I need to wait for all the AJAX calls to complete before updating the UI. Here is the loop: function sync_SyncLocalStorageToServer() { if (helper_IsAppOnline()) { ...

javascriptjqueryajaxasynchronous

Dash: Streamlining the process of updating numerous elements within a callback

I am facing a challenge with my Dash app where I have multiple html.Div components that all look and are laid out similarly. When I click on a checkbox, I want all of these elements to be hidden. The common solution suggested is to create multiple outputs ...

pythonhtmlcssplotly-dashdashboard

Vuejs did not have these dependencies within its codebase

There appear to be missing dependencies: * -!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!vuetify ...

javascriptnode.jsvue.jswebpack

The organizational structure of data in MongoDB for posts, comments, saved content, and likes

I am currently diving into the world of MEANJS web development and working on structuring my data. As a newcomer to the NoSql concept, I am seeking guidance on the best practices to follow. The data I need to store includes: questions answers likes saved ...

javascriptmongodbnosql

Assurance Code Evaluation

Recently, I've dived into the world of nodeJS and I'm getting acquainted with promises. After looking at the code below, it seems to me that it could be enhanced by integrating the retry logic within getValue2. It's important to note that ...

javascriptnode.js

Executing child processes in the Mean Stack environment involves utilizing the `child_process`

I am working on a Mean application that utilizes nodejs, angularjs and expressjs. In my setup, the server is called from the angular controller like this: Angular Controller.js $http.post('/sample', $scope.sample).then(function (response) ...

javascriptangularjsnode.jsmongodbexpress

Steps for designing an HTML table that expands and collapses partially

I am currently revamping an old "Top Screens" page by expanding the display from the top 30 to the top 100 in a basic html table format. However, I only want to show the top 20 on page load with an expand/collapse feature. While I have come across examples ...

javascriptjqueryhtmlcsshtml-table

choose a div with additional padding at the top

I am looking to create a dropdown menu with a custom arrow design. I have attempted to achieve this by wrapping my select element in a div with an arrow image background. The issue I am facing is that the select element seems to have 3-4 pixels of top p ...

htmlcss

The functionality of a basic each/while loop in jQuery using CoffeeScript is not producing the desired results

I've been experimenting with different methods to tackle this issue. Essentially, I need to update the content of multiple dropdowns in the same way. I wanted to use an each or a while loop to keep the code DRY, but my experience in coffeeScript is li ...

javascriptjqueryforeachwhile-loopcoffeescript

BlockUI - Uncaught error: The object does not contain the method 'blockUI'

Trying to implement the blockUI jQuery Plugin, I have added the necessary libraries in this way; <script src="http://malsup.com/jquery/block/jquery.blockUI.1.33.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery ...

javascriptjqueryjquery-blockui

Tips for concealing the CSS style of a descendant span element when the parent div employs text-overflow: ellipsis

Is it possible to prevent the green background of a child span from showing when the parent span has text overflow ellipsis applied? .container { border : 1px solid black; max-width : 100px; overflow : hidden; text-overflow ...

htmlcss

Getting Ajax response in HTML Unit can be achieved by leveraging its capability to render the HTML content of the web page

My web application responds with JSON data when I make AJAX requests to the server for CRUD operations. This is because I utilize jQuery to handle the data without needing to refresh the page (MVC). When a new entry is created in the system, the server sen ...

jqueryajaxjsontestinghtmlunit

Adjust the content of an iframe based on the size of the screen

Hi there, I'm currently facing an issue with an ad that can't be resized. The support team suggested using two different ads - one for mobile and one for desktop. The dimensions of the ads are 720 x 90 and 300 x 100. I would like the ad to automa ...

javascriptjquerycssiframeads

constant element within mat-menu in Angular

This coding snippet displays unread notifications to users: <mat-menu #menu="matMenu"> <div class="menu-item" mat-menu-item *ngFor="let item of notifications"> ...item content </div> <b ...

cssangularangular-material

Filter JavaScript elements by conditions and true/false values

I can't quite recall the answer to this at the moment. Consider an array of Vendors (this is just placeholder data): [ { "user_updated": null, "user_created": "128a84b5-275c-4f00-942e-e8ba6d85c60e", "d ...

javascriptvue.js

Ways to retrieve the user's IP address and provide the information in JSON format

Although I am not an expert in PHP, I specialize in developing Android apps. One of the challenges I face is extracting the user's IP address from a specific URL . This URL provides various information when accessed, but my main requirement is to retr ...

phpandroidhtmljsonparsing

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

I am working on creating a grid overlay using an absolutely positioned non-interactive div. My approach involves using the repeating-linear-gradient property as suggested by others for this purpose. The functionality works smoothly in Chrome, but I seem to ...

javascriptcssfirefoxbackground-imagerepeating-linear-gradient

Utilizing the .add() method in Firebase Cloud Firestore for working with nested

In the documentation for Firebase, it mentions updating nested objects. You can find out more about this here: https://firebase.google.com/docs/firestore/manage-data/add-data#update_fields_in_nested_objects Here is my data structure: let ref = db.collect ...

javascriptfirebasegoogle-cloud-firestore

Angular does not recognize the function element.sortable

I'm attempting to utilize ui.sortable in order to create a sortable list. Despite following the instructions provided at https://github.com/angular-ui/ui-sortable, I am still encountering an issue and receiving the following error message: TypeError: ...

javascriptjqueryangularjsspringjquery-ui

What is the process for saving information to a database with JavaScript?

I am currently utilizing the Google Maps API for address translation, primarily through the use of a geocoder. I am interested in saving these results to a local database for future reference, as there are limitations on the total number and frequency of ...

javascriptdatabase