Navigating through the sticky top navbar in Bootstrap 4 by swiping

I've encountered an issue with a sticky-top navbar that has dropdowns with multiple buttons each. On smaller devices, the navbar gets cropped and I'm unable to access the lower buttons. I'm looking for a solution to add scrolling to this navbar.

Currently, I'm using Bootstrap 4.0 and the navbar behaves like this:

In Bootstrap 3.3.7, it was simpler and looks like this: https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/

Try changing the window height to 300px to see the issue. I need assistance in implementing scrolling for the sticky-top collapsed navbar.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

.sticky-top {
  height: 100vh;
  overflow-y: scroll;
}

While this solution effectively addresses the initial issue, it inadvertently introduces a new challenge: the presence of a double scrollbar. Interestingly, this dilemma is only noticeable on desktop browsers, particularly when the browser window is significantly reduced in size and not in mobile mode. Fortunately, this complication is not of concern on mobile devices, as they typically only display the scrollbar when it is actively in use. Thus, in practical terms, this double scrollbar scenario is inconsequential :).

Answer №2

I find improved outcomes by using the following code snippet:

#nav_collapse {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch; // specifically for mobile safari browsers
    max-height: 90vh;
}

It's quite similar, but offers a slightly more accurate solution.

Answer №3

The issue I encountered was related to a fixed-top navbar that contained dropdown items. Many suggested solutions resulted in a scrollbar appearing within the navbar itself when a dropdown item was selected and the screen size was large.

To address this issue, you can implement the following solution:

.navbar-collapse.show {
max-height: 90vh;
overflow-y: auto;
}

This CSS rule specifically targets the navbar-collapse div and is only activated when the toggle is pressed, adding the 'show' class to the div. The use of '90vh' is essential to ensure that the last menu item remains visible at the bottom.

This solution is also compatible with Bootstrap 5.

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

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...

javascriptjqueryhtmlcss

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

cssreactjsnext.jsmaterial-ui

What is the best way to align a table (datatable) to the left?

How can I align the table to the left without using float:left in the following code? Applying text-align: left to the parent element of the table doesn't seem to work as expected. http://jsfiddle.net/william/B4qJG/1 HTML: <div class="valueList" ...

htmlcssdatatablehtml-table

Use desktop images to set the background for mobile views in a React JSX environment

My custom Gutenberg block is built using React JSX, allowing users to input two hero images - one for Desktop and one for Mobile. Currently, if a user does not upload a mobile image, it displays a blank space. I am looking for a way to have the desktop ima ...

cssreactjsjsxwordpress-gutenberggutenberg-blocks

Steps for integrating a video into the Bootstrap navigation bar

I've been working on a Bootstrap menu design that features text on the left side and a video on the right. My goal is to make the video extend to the top of the page with a button overlaid, similar to the image I have in mind. However, I've encou ...

htmlcssbootstrap-4bootstrap-5navbar

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

I'm having trouble responding to a click event on each slice of a Raphael Pie Chart. I've tried implementing the code below, but it doesn't seem to be working. The code is just two lines, commented as "My Code", in the example from the offic ...

javascriptjquerycsssvg

Are there any better methods for creating div backgrounds and borders using CSS?

Within my application, there exists a multitude of div elements that share identical backgrounds and borders but vary in size. Having to utilize the same background image for each individual div proves to be highly inefficient, particularly in terms of ba ...

htmlcss

Selecting a date in a pop-up

In my PHP application, I have incorporated a date selection feature within a modal dialog. However, when clicking the control, the calendar appears in the left corner of the page and remains visible even after selecting a date. Additionally, clicking elsew ...

htmlcssdatepicker

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

htmlcsscolorstextcolor

Switching out an element within a constrained array causes a momentary disappearance of the item

My playlist features artwork images that can be clicked. Upon clicking an image, the current track is replaced by the new selection in the array. An issue arises when Ember re-renders the items, causing a brief moment where the replaced element disappears ...

jqueryhtmlcssember.js

What is a different approach in Angular that can be used instead of the href attribute found in

I am trying to define a constant URL in my component.ts file so that I can test it and use it in my HTML file. I have tried using ngHref but it's not working in my case. How can I successfully define a constant URL in my component.ts file and access i ...

htmlangularhref

Is it possible to integrate React Bootstrap with Next.js?

Is it possible to integrate react-bootstrap with Next.js? I have the latest versions of both, but none of my react-bootstrap components are showing up in my app. I've searched online for solutions, but haven't found anything helpful. If needed, I ...

reactjsbootstrap-4next.jsreact-bootstrap

Resolving Bootstrap 4 column resizing problem: Ensuring the last columns fill the entire width of the row

Hello! I am facing an issue with maintaining the column layout on different screens and varying numbers. Currently, I am working with: - 3 columns per row on desktop - 4 columns per row on iPad - 2 columns per row on mobile On the desktop, when I have a ...

for-loopdynamicresponsive-designflexboxbootstrap-4

Add a CSS class to an innerHTML element just a single time

I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...

javascriptphphtmlcssajax

Why is it not possible to establish a minimum height of 100% in html?

HTML Code: <!DOCTYPE html> <html> <head></head> <body> <link rel="stylesheet" type="text/css" href="style.css"> <div class="sheet" style="width:80%;max-width:1024px;height:400px;"></div> ...

htmlcss

Enhancing ng-grid with pagination by incorporating diverse images

I am currently working with a grid that displays images as values in one of its columns using the code below. { field: 'TR', displayName: 'Trigger Redundancy', cellTemplate: '<div class="ngCellText" ng-class="col.co ...

angularjstwitter-bootstrapng-grid

require an array that contains an embedded object

When making a post request, I need to include an array with an object inside. I have observed that adding new properties inside an object works fine. However, when attempting to add properties while the object is inside an array, it does ...

javascripthtmlarraysreactjsredux

Customizing the appearance of checkboxes in React Material-Table filtering feature

Is there a way to modify the style of checkboxes in filtering? For instance, if I wish to adjust the dimensions of the checkbox that appears for the Birth Place field, what steps should I take? https://i.stack.imgur.com/pZLqQ.png ...

cssreactjsmaterial-uimaterial-table

Adhesive side panel using Bootstrap 5

I've run into an issue while trying to make a side div sticky using Bootstrap 5. I applied the position-sticky class, but it doesn't seem to work as expected. Surprisingly, it works for the top div that I also want to stick. Adding fixed-top or s ...

htmlcsstwitter-bootstrapbootstrap-5

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css