Create a responsive Bootstrap menu or navbar that expands by a specific percentage and can be scrolled through if necessary

I have previously asked a similar question, but I am trying to clarify it further as I did not receive any responses on my last post. Thank you!


In Bootstrap, I have a navbar/menu that expands in the 'xs' view (hamburger button).

  • How can I make the navbar/menu expand to 100% and become scrollable if necessary?

Here is the original code:

#menu1 .navbar-collapse{padding:0;}

When using the original code, the menu opens to approximately 50 percent of the screen area, and the dropdown menu becomes scrollable, which is desirable.

My attempt at solving the issue with this code:

#menu1 .navbar-collapse{padding:0; min-height:100%}

However, when I add the "min-height: 100%" to the CSS above, nothing changes. The dropdown menu still appears the same size. Why isn't the min-height property expanding the dropdown all the way?

Any suggestions on how to resolve this issue would be greatly appreciated.

Thank you, Marcus


CSS for the entire menu:

(CSS code here)

HTML:

(HTML code here)

Answer №1

After some trial and error, I managed to find the resolution. By switching from using 'px' to 'vh', the issue was resolved. The directive pertained to adjusting the height of the viewport:

#menu1 .navbar-collapse{ padding:0; min-height: 70vh;}

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

Transferring information from a Bootstrap modal dialog box

Is it possible for users to submit data from a Bootstrap modal popup? https://i.sstatic.net/OxWti.png I am curious if there is anyone who has experience with this and how they managed to send the data back to the server. Razor Pages provide structure for ...

Obtaining User Input in React JS within the Fetch Statement

I've written a code to fetch weather data from an API. Currently, the location is set to "chennai" in the link provided. I'd like to make this location user-dependent. How can I achieve this using React? import React,{useState,useEffect} from ...

Troubleshooting problems with ASP pages in WebMatrix 2

Every time I try to update my website and add new pages using WebMatrix 2, I encounter errors in my asp pages such as: "This document type is not supported. IntelliSense and validation for this document type will be based on HTML 5." The issue seems to b ...

Collaborative Artistry: Using HTML5, JavaScript, and Node.js for Multiplayer

Creating a multiplayer drawing application for touch-enabled devices has been a challenge. I have utilized Node.js with Socket.io to draw points on a canvas, but there's an issue with the touchend event not resetting properly. To illustrate, take a l ...

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

Is the transition not smooth when sliding the element up and down on mobile devices?

I have successfully implemented a modal that slides up and down when clicked using CSS and jQuery. While it looks decent on desktop, the animation is choppy on mobile devices, especially when the modal slides down. I have searched for solutions to achiev ...

Design a background or overlay for modal using CSS styling

How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal? .modal-footer-small width: 450px height: auto margin: 0 auto top: 53% left: 0 right: 0 ...

Tips for preventing text from shifting once a border has been applied

Is there a way to create a navigation bar that adds a border upon hovering without the text shifting every time the border is added or removed? function navigateToHomePage(){ window.location.replace("..."); }; $(document).ready(function(){ $(".n ...

Utilize conditional styling along with hover effects in ReactJS

I'm facing an issue where I need to set up a conditional style and a hover effect for TableRows. They work fine individually, but when combined, the hover function stops working. CSS const StyledTableRow = withStyles((theme) => ({ root: { tab ...

Adjust the spacing between the title and other elements in an R Shiny application

How do I modify the font and size of a title, as well as add some spacing between the title and other elements? navbar <- navbarPage( Title = "Intervals", tabPanel("Data Import", sidebarLayout(sidebarPanel(fi ...

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

Why is it proving difficult to eliminate margin and padding from the top of the page?

Struggling to remove padding or margin from the top, I attempted to adjust the main container settings: margin-top:0px !important; padding-top:0px !important; Unfortunately, this did not have the desired effect. The code is too lengthy to include in thi ...

Designing a navigational sidebar featuring clickable links to specific locations on Google Maps

I'm currently utilizing a map script created by Derek Ender that integrates with Google Fusion Tables to display locations on a map. While the script is functioning well, I have received a request to make the sidebar list of locations clickable. The ...

Having trouble connecting local stylesheet on server?

Currently, I am developing an HTML-based game with Node.js, focusing on enhancing the front-end interface. While trying to include a CSS stylesheet, I encountered an unusual issue. The structure of my folders is organized as follows: C:\Users\m ...

Hiding an element with display: none will prevent the hover effect from

I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...

Why is my client program not receiving a response from this socket.io server?

Currently, I am in the process of developing a trivia game where two users engage in answering questions with the winner being declared at the end. As part of this project, I have integrated socket.io to facilitate the exchange of answers. However, I have ...

Modify the `<link>` tag using the `onclick` function in JavaScript

I want to switch up the site's style with just a click on an icon <head> <meta charset="utf-8"> <link rel="stylesheet" href="styled.css" id="styles"> </head> Everytime I try to tackle th ...

Responsive parent div size adjusting to fit HTML5 video resolution dynamically

I am encountering a challenge with my responsive design website that features an HTML5 video occupying the entire browser width. The video's CSS is set to width:100%;height:auto;, ensuring the video maintains its resolution ratio regardless of the bro ...

A guide to creating full-screen Angular components that perfectly match the size of the window

Currently, I am working on an Angular project where in my app.component.html file, I have various components like this: <app-selector1></app-selector1> <app-selector2></app-selector2> ... I am trying to figure out how to make my c ...

Load a distinct JSP file from the sidebar in JSP

I have an index.jsp file containing a sidebar: <div id="sidebar"> <li ><a href="create">Create</a></li> <li ><a href="view">View</a></li> <li ><a href="Delete">Delete</a></li> & ...