Tips for enlarging a Bootstrap 3 drop-down menu when accessing from a desktop

My goal is to showcase links using a Bootstrap 3 dropdown for mobile screen sizes and a list for larger screens like desktops and tablets.

Dropdown example:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

List example:

<ul class="list-inline">
  <li>...</li>
</ul>

I plan on utilizing the responsive utility classes from Bootstrap to show/hide the markup based on media queries. However, I'm concerned about hiding links in this manner. Is there a better way to achieve my objective without concealing links?

Check out a demonstration of my concept here.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you're not too concerned about the specific style of the dropdown list, another option is to utilize navbar-nav as it's designed to collapse on mobile devices.

<div class="dropdown">
  <button class="btn btn-default visible-xs" data-toggle="collapse" data-target="#myList">
    Menu <span class="caret"></span>
  </button>
</div>
<div class="navbar-collapse collapse" id="myList">
  <ul class="nav navbar-nav">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

View Demo: http://www.example.com

Source Code: http://www.example.com

Answer №2

Exploring Media Queries

Cascading Style Sheets (CSS) :

@media screen and (min-width: 768px) {
  .dropdown button{
      display:none;
  }  

  #mylist {
    display:block;
    clear:both;
    position: relative;
  }
  #mylist li{
    float:left;
  }
}

Fiddle Link : http://jsfiddle.net/p7b855t3/2/

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

Altering the state ahead of rendering

I am experiencing an issue where the Parent component is passing empty props to the Child component. This may be due to my attempt to set the state of my data within a function instead of in a constructor (for the Parent component). I only want the state o ...

javascriptreactjsjsx

The event listener for onChange on my dropdown menu is not functioning as expected

Hey, I'm trying to achieve something when my select box changes. Here's my code snippet: function Task(){ const prints = (e) =>{ console.log("it prints"); } const prints2 = (e) =>{ console.log("it ...

javascriptreactjsforms

Challenge encountered with numerous checkboxes

Disclosure: My experience with jQuery is limited to just one week, and I have been working with HTML/CSS for two weeks. I recently implemented a form on my website that includes checkboxes and text input fields. The main checkbox, #ship_to_billing, contro ...

jquerycheckbox

I'm facing an issue with this error message - DiscordAPIError: Unable to send a message that is empty. How can I

What's the solution to this issue? Error: UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message Code: let y = process.openStdin() y.addListener('data', res => { let x = res.toString().trim().split(/ +/g) ...

javascriptdiscord.js

Calculate the average color of the outer pixels in an image

I am looking to dynamically set the background color of a div using the average color of the outer pixels in an image. This way, I can avoid manually setting the background color for each image. For example, if the image is 100px x 100px, I would check th ...

javascriptjquerycssimage

Issue with three.js memory leak due to malfunctioning .dispose() method or incorrect usage

Greetings! I'm currently facing a memory handling issue. Despite researching various forums, I am still unable to identify the problem in my code. My project involves combining d3.js with three.js to create a visualization of nodes resembling planet ...

javascriptd3.jsmemory-leaksthree.js

Internet Explorer has encountered a JavaScript error and is unable to retrieve the value of the property '0':

My current setup includes: <img id="uploadedimage" alt="uploaded image" src="" width="250px" height="250px"/> I use a div to showcase the selected image using this jQuery script: $('#BusinessImage').change(function (ev) { va ...

jqueryinternet-explorerfile-upload

Display a loading symbol during task execution

I currently have a link on my control panel that, when clicked, calls an action in my controller. <%= link_to "Enviar Correos".html_safe, {:controller => "users", :action => "email_all_users"}, :method => "get", :html => {:style => "col ...

ajaxruby-on-rails-3jqueryruby-on-rails-3.2

Showcasing the JSON information across separate columns in a unique format

Query regarding organizing data into different columns based on labels. In the provided plunker, data from a JSON file is currently displayed and I need assistance in moving the second iteration to the FEMALE column. Thank you for any help. Plunker URL S ...

jqueryjsonajax

Arrange an array of objects to a specific sequence

I am currently working with an array of objects that contain a property named 'CODE'. [ { ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", ...

javascriptangularjsunderscore.js

press a JQuery button to proceed further

There seems to be an issue with the page I am attempting to test. On my first attempt: Manually clicking a button redirects me to the next page as expected. However, when using selenium to click on the same button, I receive an error page stating "Sorry.. ...

javajqueryseleniumselenium-webdriver

'AngularJS' filtering feature

I am dealing with an array of objects and I need to extract a specific value when a key is passed in the 'filter' function. Despite my best efforts, the controller code snippet provided below returns an undefined response. Can someone please assi ...

javascriptarraysangularjs

Receiving a 401 error code stating "unauthorized" when attempting to invoke a method using AJAX in .NET

I am working on a .NET project within the framework 4.5.1 When I incorporate ajax as shown below, the debugger successfully hits the page_load event: $.ajax({ "async": true, "crossDomain": true, type: "POST", url: "Advance ...

javascriptc#jqueryasp.netajax

How to activate Yii2 confirmation popup

I have a special ActionColumn on my GridView and I'm attempting to use the yii.confirm function with the data-confirm attribute for the delete action, but the dialog box is not appearing. [ 'format'=>'html', 'content' ...

javascriptphpjqueryyii2

Guide on importing an external JavaScript library in Node.js utilizing a TypeScript declaration file

I am working on a Node.js project using Typescript and I am facing an issue with integrating mime.js (https://github.com/broofa/node-mime). Even though I have a declaration file available (https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mim ...

javascriptnode.jstypescript

The autofocus feature does not function properly in an input tag that is not located within a form element

Is there a way to set the autofocus property in an input element that is not part of a form? I have tried adding the "autofocus" attribute to the input tag but it doesn't seem to be working. <div> //I have added the autofocus property her ...

javascripthtmlcssuser-interfaceautofocus

What is the correct way to apply a consistent background color to all elements within a container?

Appreciate the prompt responses to my previous inquiry. "I am looking to have a banner on my webpage that contains left-aligned text and right-aligned image, taking up the full width of the page." I neglected to specify that I would like the entire "bann ...

css

"Maps and Ripple emulator are effective tools for development, but the android emulator does

I attempted to implement a Google Maps code for Cordoba using two different emulators - Ripple Chrome and the standard Android emulator. Surprisingly, Ripple was successful in displaying a geographic location on the map, whereas the Android emulator only ...

javascriptandroidcordovagoogle-maps-api-3

What is the best way to ensure my jQuery plugin is up to date?

I have a question regarding the functionality of this plugin I am using. My goal is to update the timer it provides. To start the countdown timer with 5000 milliseconds remaining, I use the following code: $('#CountdownTimer').countdown({ remai ...

javascriptjquerycountdown

Snatching the lesson found within an iframe

Is it possible to obtain the id from an iframe using the following method? var iFrame = window.top.document.getElementById('window_<?php echo $_product->getId() ?>_content'); However, I am struggling to understand how to retrieve the c ...

javascriptiframeprototypejs