Scrolling the page is done by moving the mouse wheel on the navigation

Our website, built with Twitter Bootstrap, features a dropdown menu with a height of 500px. However, we've noticed an issue in WebKit browsers - when using the scroll wheel on the mouse while hovering over the menu, the page scrolls instead of the menu itself. While Firefox performs better, it still occasionally experiences the same scrolling behavior.

To test this issue, visit the "General Policies" menu item:

https://i.sstatic.net/YzrYC.png

We are looking for a solution to ensure that when the mouse hovers over the menu, it gains focus and allows the scroll wheel to navigate the menu content rather than scrolling the entire page. Any suggestions?

csstwitter-bootstrap-3webkit

Answer №1

including

overflow-y: auto;

in the CSS for .dropdown-menu enables me to scroll using a mouse wheel in Chrome (a webkit browser)

Answer №2

If you apply overflow-y: auto, that should resolve the issue. However, the root cause seems to be the z-index value. Adjust the z-index value for: 

nav .dropdown-menu {
  z-index: 99999;
}

After making this change, the problem should be fixed.

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

Can anyone provide a method for identifying the location of the page fold on a specific viewport?

Many innovative designs have successfully managed to position their content above the page fold in a way that it always remains visible within the viewport. Currently, I am using JavaScript to calculate the height, but this approach has its drawbacks. Her ...

javascripthtmlcss

Create an HTML table with a static header, adjustable columns, and the ability to resize to a width smaller than the content

Looking to create a unique web application with a table that has a fixed, styled header, resizable columns, and the ability to resize the columns without truncating content. Additionally, I want the body of the table to scroll if it cannot all fit on the p ...

jquerycsshtmlwebkithtml-table

Ways to align a button in the center using Material-UI

I'm struggling to find a way to center buttons in Material-UI. Here is the code snippet I currently have: function BigCard(props) { const { classes } = props; return ( <div> <Card className={classes.card}> <C ...

cssreactjsbuttonmaterial-uialignment

Basic CSS text overlay on top of images

Hey there! I'm in need of some assistance with displaying text over an image. Specifically, I'd like the text to appear on the left side of the two people in the image and remain proportional when transitioning from desktop to tablet view using m ...

htmlcss

Verify the position of the scrollbar without triggering any reflow

Here is a function I have: is_bottom: function() { if (settings.scrollBottomOffset === -1) { return false; } else { var scroll_height, scroll_top, height; scroll_height = ...

javascripthtmlcssperformance

Flexslider doesn't adjust the height of the viewport when displaying a shorter image in the slideshow

Is Flexslider not resizing its viewport height according to the current image on your site? The fixed height seems to be causing blank white space under shorter images. Are you inadvertently overriding Flexslider's responsive height function? Is there ...

htmlcssflexslider

Position Font Awesome to the right of the text in the list

Hi there, I am currently working on a project where I want to align font awesome icons to the right of my text within a list. My website is in a Right-to-Left (RTL) language and I can't seem to find any resources on how to achieve this. Any help would ...

htmlcssfont-awesome

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: https://i.sstatic.net/lxzc9.png However, with my current code, the result I'm seeing is different from what I expected: https://i.sstatic.net ...

cssionic-frameworksassionic3

What is the best way to resize the image to fill half of the screen?

I am trying to make sure that the image fits 50% of the screen height of the device and not just 50% of the current screen size, which may have been minimized by the user. I also want the image to stay fixed in size even when the user resizes the screen. ...

javascripthtmlcss

Unusual discovery: Mysterious object manifesting in my HTML on Chrome/Webkit (with visual evidence and interactive demonstration)

I'm at a loss with this peculiar artifact that has appeared in my HTML - take a look at this highly magnified screenshot: Highlighted in red is this bizarrely small line. I've scoured my code but can't seem to pinpoint its origin. I'v ...

htmlcssgoogle-chromewebkit

Can anyone recommend a super sleek drop-down navigation menu that includes both images and text descriptions?

My interest has been piqued on how to create a menu similar to the one on with all the images and text details. Does anyone have any insights on the technologies utilized for this? Are there any commercial options available that offer a similar functiona ...

javascriptcssmenu

Elegant rounded bordered sidebar design to highlight selected navigation items using HTML and CSS

I am looking to replicate the sidebar design displayed in the image below by using HTML and CSS. While I have successfully rounded the borders on the left side of a selected link, I am stuck when it comes to rounding the borders on the right side. https:/ ...

htmlcssanimationcss-animations

Step by step guide to applying a personalized "margin" to your CSS

I have set the body element's margin to 0 in my CSS stylesheet. However, I am struggling to successfully set the margin for the div elements. Therefore, I would like to set all other things' margin to 0; except for the div elements with the cl ...

htmlcss

What is the best way to create a stylish vertical line separating two divs stacked vertically?

I am trying to connect two divs that are positioned vertically with a clean and elegant vertical line. Although I attempted using the pipe (|) font, it did not produce the desired result. Can anyone provide guidance on how to create a more aesthetically pl ...

htmlcss

Disable toolbar focus in TinyMCE

Is there a method to prevent the appearance of the white square known as "Focus to toolbar" in TinyMCE? Clarification: Upon pressing Alt+F10 in TinyMCE, a white square is outlined around a button on the toolbar. This allows navigation among toolbar butto ...

javascripthtmlcsstinymcetinymce-4

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

pythonhtmlcssweasyprint

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

I'm currently making updates to my portfolio website, but for some reason, the scroll reveal animation has suddenly stopped working. I made a few edits and now it seems to be broken. /*===== SCROLL REVEAL ANIMATION =====*/ const sr = ScrollReveal({ ...

javascripthtmlcss

What causes the inconsistency in CSS Hover behavior?

Looking to devise a button in css and html that reveals another button below it by rotating on its lowermost axis when hovered over. Progress has been made here: http://codepen.io/machinarius/pen/BdtCb However, there seems to be an issue with the hover b ...

csscss-animations

Preventing Text Chaos in CSS Layouts: Tips and Tricks

I'm facing an issue with the alignment on this page: . When the page is resized, some of the text links are too long and causing a problem with the layout of the stacked images. How can I fix this? Here is the HTML & CSS code for reference: CSS: #b ...

htmlcss