Issues arise when the sub-menu does not function properly and overlaps with other elements of

I've been working with a client on their website and encountered an issue.

On the mobile version of our menu, when I hover over a menu item that has several sub-menu items, those items display properly, but there is an element below them showing through the text as well.

The troublesome element seems to be a testimonial slider that updates dynamically, which could be causing the problem.

Here's a GIF illustrating the issue: overlap problem

You can visit the site here:

Any assistance or advice would be greatly appreciated!

Thank you, Paul

css

Answer №1

To solve the issue, adjust the z-index of the .header-row element since it is positioned relatively and its z-index takes precedence.

Current CSS for header-row:

.header-row {
    position: relative;
    z-index: 2;
}

Update to:

.header-row {
    position: relative;
    z-index: 2000;
}

An alternative approach is to switch the .header-row to position:static, then modify the z-index of the #main-navelement: 

.header-row {
    position: static;
    z-index: 2;
}

#main-nav {
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 2000;
    width: 100%;
}

Edit: To clarify further, the navigation overlaps the content due to lack of z-index set for the <div id="content">and its children. Any element with a defined z-index will be displayed in front of the content.

With a z-index of 2 for header-row, the nav displays in front of the content.

The complication arises from testimonial-slides having dynamic z-index values between 90 and 100. Since they lack a parent with specified z-index and relative position, their z-index compares against the header-row's z-index (set at 2).

Another solution could involve setting the z-index of <div id="content">to 1.

Answer №2

It appears that there are two possibilities here: either the z-index of the menu is too low, or the menu items have a transparent background.

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

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: This is the desired outcom ...

cssreactjsmaterial-uiflexboxstyled-components

Utilizing CSS to create dynamic 3D cube transformations

Exploring the realm of CSS 3D transforms to showcase cubes and cuboids featuring cross-sections has been my current venture. In this endeavor, I'm aiming at compatibility with Chrome, Firefox, and MSIE 11. It has come to my attention that in order to ...

htmlcss3d

What are the buttons featured in the header of this mobile-friendly bootstrap panel

Can anyone offer advice on how to make a bootstrap panel header responsive? The panel has a title with several buttons on the right side. While it looks good on a large screen, it becomes messy on smaller browser sizes. You can find my complete code here ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

How to customize the color of radio buttons in JFXRadioButton using CSS

I am facing an issue with customizing the styling of JFXRadioButton component from this library : jfoenix.com I want to modify the color of the circle, but the default class is not working. Are there any suggestions or solutions available? (The colors me ...

cssjavafx

Apply a class to each consecutive element following the current one until reaching a child element with a

My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next o ...

javascriptjqueryhtmlcss

Ways to modify the input field value in my form based on the current page context

I am currently developing a website for a sports event organization company using Angular, HTML/CSS. The focus of this website is on the triathlon sport and it consists of several stages. On the home page, there are five image tags representing each stage ...

htmlcssangulartypescript

What is the best way to ensure a floated image matches the height of its parent container?

I am facing an issue with setting the height of a logo within a footer div to match the height of the div itself. Using height: 100% doesn't seem to work as expected. Below is the relevant HTML: <footer> <img src="images/circle_logo.png" ...

cssimagehtmlcss-float

Steps for converting SCSS to CSS using node-sass

I have a main.scss file with numerous imports from other .scss files. Whenever I make changes to any of the *.scss files, the master.css file is automatically generated. I rely solely on NPM for my build process and do not use Gulp or Grunt! It's imp ...

cssnode.jssassnpmnode-sass

IE7 is not applying the conditional CSS styles to content loaded through AJAX

I am currently tackling some challenges with IE7 compatibility in a Rails application that I am developing. It appears that CSS styles implemented from a stylesheet applied with a conditional comment are not being rendered properly when using HAML like thi ...

htmlcssajaxinternet-explorer-7

Enable only the current week days on the multiple date picker feature

Can anyone recommend a date picker that only shows the current week and allows for multiple date selections by the user? I found this jsfiddle which limits the display to the current week, but it doesn't support selecting multiple dates. I attempted ...

javascriptjqueryhtmlcss

What is the method for calculating the 100% width of a flex child?

Adjusting the width of the .sidebar to 100% seems to make it smaller in size. Interestingly, removing the body's font-size: 1.3rem and toggling the .sidebar's width: 100% results in a slightly larger appearance. It is expected that setting the ...

htmlcssflexbox

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

tips for reducing the size of the recaptcha image to display just one word

The custom recaptcha theme I'm working with requires the image to be smaller in width but not in height. Is there a way to achieve this requested design? ...

phpcssrecaptcha

Using jQuery to select and animate several elements simultaneously without repeating the animation

Issue Summary (Fiddle): I'm trying to make all elements fade out simultaneously when clicked, but the current code causes the target to trigger three times resulting in three alert() calls. I want them to fade together without using a wrapper element ...

javascriptjqueryhtmlcss

Transform this color matching game into an image matching game using JavaScript and jQuery

I have a color matching game that I would like to enhance by matching background-images instead of just background-colors. However, I am facing difficulties in making this change. For instance, instead of matching the color red with the text "red," I wan ...

javascriptjqueryhtmlcss

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...

htmlcsscss-selectorsline-breaks

Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector. <div class="preloader"> <div class="cssload-speeding-wheel"></div> </div> <section id="wrapper" class="login-register"> <div class="login-box"> <d ...

javascripthtmlcsspuppeteer

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

Determine the height of the left div, which is set to auto, and apply the same height to the right div, which has overflow set

I am facing an issue that needs a solution. I need to ensure that two div elements have the same height. The left div should have 'auto' height while the right one must match it. Moreover, the right div contains 14 nested divs that need to be scr ...

javascripthtmlcssheight

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

htmlcssnavcentering