Issue with z-index in CSS Bootstrap 4 drop-down menu when viewing in full screen mode

Having an issue with the CSS Bootstrap 4 dropdown menu for Youth Bowling Canada. The hyperlinks are not working when the screen is at full size, but if you shrink it to reveal the hamburger dropdown, they work fine.

I attempted to fix this by adding z-index:9999; to the CSS for the dropdown class, but it didn't solve the problem.

The hyperlinks should be functional in the full-screen drop-down menus, just like they are in the smaller, shrunken version of the screen.

I suspect that the issue may be related to the scroller present on the screen.

cssbootstrap-4

Answer №1

You are correct in your assumption that the issue lies with the z-index.

The stacking groups of your slider, identified by the class da-slider, and your dropdown container are separate. To resolve this, adjust the z-index property to -1.

.da-slider {
  ...
  z-index: -1;
  ...
}

PS: It seems like there is a lot happening within your app. For further insight into the z-index property, check out this informative resource:

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

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

htmlcssxmlxhtmldtd

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

javascripthtmlcss

What is the best method for placing text over an image in Dreamweaver?

What steps should I take to overlay text on an image using Dreamweaver? Similar to the example linked below: https://i.stack.imgur.com/8GvkW.png Below is a snippet of my code: HTML <body> <main> <header> <img src="images/headerimag ...

htmlcssimagedreamweaver

What is the method for generating a horizontal select input with aligned options?

I'm interested in designing a select element with options displayed horizontally next to each other, resembling this layout: https://i.sstatic.net/3zoVm.png Does anyone have suggestions on how to achieve this design? ...

htmlcssformsinputradio-button

Emphasize an element when hovering over it

I am looking to create a custom hover effect for highlighting elements in a Chrome extension I'm developing. The goal is to achieve a similar behavior to using the magnifying glass tool in Chrome Dev Tools, where only the hovered element is highlighte ...

javascriptjquerycssgoogle-chromegoogle-chrome-extension

Ensuring Message Accuracy with Selenium in C# Development

I am a beginner in the world of test automation and I am looking to retrieve the value from a web element labeled "message-success failed", which displays the message "This customer name already exists". Here is what the CSS looks like Even though I atte ...

c#cssselenium

Bootstrap gallery with images that resize proportionally

Attempting to create something simple, but currently unsure how to proceed. A few months ago, I had a concept in mind, but unfortunately lost the files and now feeling stuck. Using Bootstrap to construct a gallery with two different image sizes: 1920x1200 ...

javascripthtmlcssbootstrap-4

Can one image impact other images through a wrapping function?

I am facing an issue with positioning 3 images independently from the window size using the position: relative declaration. When I try to define positions for the first 2 images and then insert the third one, it disrupts the position of the first two. Is ...

jqueryhtmlcss

Placing text on top of an input field using HTML and CSS

I am currently in the process of creating a website for my high school that will allow students to access their class schedules online. To differentiate each class, I have assigned them different background colors. This is achieved on the main page by adju ...

htmlcss

Encircle the text within intersecting divs

I am facing an issue with my main div that contains some text and 2 other overlapping divs. The text in the main div is getting overlapped by the other two divs. I need help to make the text in the main div wrap around the overlapping divs. It may sound s ...

javascripthtmlcssbootstrap-4frontend

Bootstrap Modal refuses to shut down

I implemented a modal that shows a loading message in another modal after submitting a form. However, I'm facing an issue where the modal with the loading message doesn't close properly upon receiving the response from the form submission. I trie ...

jquerybootstrap-4bootstrap-modal

How can I align an image in relation to text?

I'm attempting to create an interesting layout where I have text centered with an image on each side, like this | | | text[image] | | [image]text | | | My goal is to have the text centered within t ...

htmlcssposition

Steps for positioning a RadioButtonList at the center of a table cell

How can I easily center a RadioButtonList? It used to be straightforward, but for some reason the below HTML is not working. Can you spot what's missing? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></ ...

htmlcssradiobuttonlist

Using CSS :hover for elements with dual classes only

Is there a way to make the CSS :hover selector work only when two different classes are attached to a div? I have tried a couple of methods, but they eliminate the hover effect. For example: .accordionButton .cyan:hover{ color: cyan; } I cannot s ...

csshover

Issues with CSS not applying to smaller page sizes when using @media queries

My website was created using bootstrap and CSS. I have a list displayed on the side in a normal screen size, such as on a computer or laptop. However, when the screen size is reduced to less than 500px (mobile), I want the list to drop to the bottom of the ...

htmlcssbootstrap-4

What is the process for inserting a custom image onto a button that redirects to a different website using HTML and CSS?

Looking to make a button that directs to a different website with a custom image. Would it be better to use the <input> tag or the <button> tag? Appreciate any insight! ...

htmlcssimagebutton

Is there a clash between flexbox and Google PageSpeed Insights when it comes to optimizing images?

I attempted to optimize the images on the page using Page Speed Insights. Currently, there are 3 images that need to be optimized, but Google is providing some odd results. The images change their appearance after optimization, even when setting image wid ...

cssflexboxpagespeedgoogle-pagespeed

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

A helpful tip for disabling by overriding webkit-transform without removing the line

I needed to make some changes to a css file but didn't want to alter it directly for personal reasons. Instead, I created a new css file where I overrode the specific lines that needed changing. However, now I'm wondering how I can cancel out thi ...

css

Is it possible to hide a div using Media Queries until the screen size becomes small enough?

Whenever the screen size shrinks, my navbar sections start getting closer together until they eventually disappear. I've implemented a button for a dropdown menu to replace the navbar links, but I can't seem to make it visible only on screens wit ...

javascriptjqueryhtmlcssmedia-queries