Tablet-friendly dropdown menu

Seeking advice on implementing @media queries for tablets with a width of 991px. Currently, the CSS file is optimized for mobile devices but needs adjustments for tablet responsiveness in the dropdown menu.

I attempted the following CSS code:

@media (max-width: 991px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-nav>li {
    float: none;
    background: black;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
.navbar-collapse.collapse.in { 
    display: block !important;    
}}

You can view the current state on this Plunker. The dropdown menu functionality should be tailored to function up to 991px width but it's currently limited to 768px. Any suggestions on how to rectify this issue?

htmlcsstwitter-bootstrapdrop-down-menunavbar

Answer №1

Modify the class of your div element

collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right

to collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-12

Update the class attribute

.navbar-collapse.collapse.in {
display: block !important;
margin-left: 0;
}

Answer №2

Here is a media query specifically for tablet devices to ensure consistent CSS styling:

/* For Landscape tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1199px) {
 .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav>li {
        float: none;
        background: black;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block !important;
    }
}

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

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

javascripthtmlangularjsrequirejsangular-ui-router

Looking to discover how to optimize a website for various Android resolutions?

Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to ...

androidhtmlcssandroid-layoutmobile

Getting rid of the arrow icons in a Material UI TextField

I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...

cssreactjsmaterial-uiiconstextfield

Tips on cycling through hovered elements in a specific class periodically

I'm looking to add a hover animation to certain elements after a specific time, but I haven't been able to make it work correctly. Here's my attempted solution: CODE $(document).ready(function(){ function setHover() { $(' ...

javascriptjquerycssloopsforeach

Jquery form calculation not matching up

I've been struggling to make this jQuery math function work with my form. The snippet works fine, but when I try to integrate it into the actual form, I can't seem to get it aligned properly to perform the required calculations. Any suggestions ...

javascriptjqueryhtml

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

Positioning HTML elements using Python

Currently, I am utilizing lxml.html for some html parsing in Python. My goal is to roughly estimate the position of elements on a page as it would appear when rendered by a web browser. While precision is not necessary, overall correctness is desired. To ...

pythonhtmllxml

Utilizing jQuery to close a modal when clicking outside of its container

Trying to target elements in my practice layout but struggling to figure out the right approach: BASIC HTML <button id="opencontact" type="button" name="button"> <i class="far fa-envelope fa-2x"></i> </button> <section id="c ...

jqueryhtmlcss

How to use jQuery to update the href attribute of a parent link

Can someone help me figure out why I am having trouble changing the 'href' of the parent link to a header logo? Thank you in advance! Here is the HTML code snippet: <a href="https://URL.IWANTO.CHANGE"> <img id="partner_logo" src="/ ...

javascriptjqueryhtml

What can I do to stop hidden HTML tags from loading on my page? Is it possible to completely remove them from the page

I previously inquired about this question but did not receive a satisfactory answer. Here are the input fields I am working with: <form method ="post" action="select.php"> <input id="nol" style="width: 350px;" type="text" name="searchdisease" pl ...

phpjqueryhtml

What is the best way to display an alert box through AJAX technology?

My code snippet is as follows: <script> function updateQty(quantity) { $.ajax({ alert(quantity); }) } </script> Here is the corresponding HTML markup: <form name="quantityForm"> <select name="quantity" id="quantity" onChan ...

javascriptjqueryhtmlajax

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

javascriptjqueryhtmlcss

How can I showcase a different component within another *ngFor loop?

I am currently working on a table in HTML that displays product information. Here is the code snippet for it: <form [formGroup]="myform" (ngSubmit)="submit()" > <tbody> <tr class="group" *ngFor="let item of products;"&g ...

htmlangulartypescriptngfor

Setting MenuItem to the correct width in asp.net simplified

I have a 1000px wide container, within it there is a menu control with 5 items (links). Each item has a width of 200px in the CSS file to make use of the entire length of the line. .level1 { border-width: 0px; margin: 0px; padding: 0px; background ...

c#asp.netcss

Is there a way to keep my <nav> positioned in the top right corner of my header?

I'm in the process of setting up a fresh homepage and I've implemented the code below: menu { width: 100%; height: 60px; background: rgb(0, 0, 0); z-index: 2; position: fixed; } #content { margin: 0 auto; width: 1024px; height: ...

htmlcsswebnav

Is it possible to nest a section tag within an anchor tag?

Is it possible to nest a section tag within an a tag? For example: <a href="mylink"> <section class=mysection> <h2>my headline</h2> <p>my paragraph</p> </section> </a> Thank you for your help ...

htmlsections

Flask Modal fails to function properly in the absence of table data

I'm currently troubleshooting an issue with my modal on a Flask web app that utilizes a SQLite database. When trying to add new rows to the table using some JavaScript code, everything works perfectly unless the table is empty. In that case, I am unab ...

javascriptpythonhtmlcssflask

Issue with firing the Selected Index Changed event for a DropDownList while databinding on page load

During the page load, I bind a Dropdownlist (System.Web.UI.WebControls.DropDownList) that is populated with data. try { if (!Page.IsPostBack) { DataTable dt = new StaticNoticeController().GetStaticNoticeNames(); ...

c#.netasp.netcontrolsdrop-down-menu

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

htmlcss