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

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

javascripthtmljquerycsssass

Achieving full child div coverage within a bordered parent div on Chrome

I am encountering an issue where I am trying to insert an image into a bordered div, but in Chrome 96.0 there are unexpected margins appearing from the top and left that I cannot seem to remove. Below is the code I am using: .wrapper { width: 36px; ...

javascripthtmlcss

"Enhance your shinydashboard with a customizable header dropdown feature that allows you

I am trying to create a vertical grouped dropdown menu in the header panel that contains multiple links. Currently, I can only achieve a flat horizontal layout using tags$li. I want to place linkA and linkB under grouplinkAB, allowing users to open one o ...

htmlcssrshinyshinydashboard

Align a Bootstrap button to the bottom of a flex-box column

After exploring numerous online discussions in search of a solution to my issue, I have come up short. Applying 'align-self: flex-end' to the .reveal-btn only moves the button to the right, whereas using 'margin-top: auto' has proven in ...

htmltwitter-bootstrapcssflexboxbootstrap-4

Execute grunt serve:dist with local file paths enabled

I am currently utilizing grunt to construct and deploy a basic angular web application that incorporates bootstrap and font-awesome. The project was initially set up using the yeoman generator-angular and constructed utilizing grunt serve:dist. I have obs ...

htmlcssinternet-explorergruntjsyeoman

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

Confusing focus styling in React Bootstrap on mobile devices

THE ISSUE: Facing a problem in my project where on mobile, when a button is selected and then unselected, it remains dark due to focus which can be confusing. To see the issue in action, check out this screen recording: Screen recording You can view the ...

cssreactjsprogressive-web-appsreact-bootstrap

The font-weight property appears to be ineffective across all browsers

I'm struggling with the font-weight property in my CSS. Despite trying different values like lighter, bold, and even numerical values like 300, it doesn't seem to have any effect on the font weight in any browser. I am using the following code to ...

css

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

javascripthtmlcssreactjstext-to-speech

Troubleshooting Variances in CSS Layouts on Different Devices

I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache. Take a look ...

htmlcsslayoutresponsivebox-sizing

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

The position of the scroll bar remains consistent as you navigate between different websites

Is it possible for me to click on a link within my HTML website and have the other website load with me in the exact same position? For example, if I'm halfway down a webpage and click a link, can I be taken to that same point on the new page? If so, ...

javascriptjqueryhtmlcss

The TypeScript error reads: "An element is implicitly assigned the 'any' type because an expression of type 'any' cannot be used to index a specific type."

[Hey there!][1] Encountering this TypeScript error message: { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { ...

javascripthtmlcssreactjstypescript

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adja ...

jquerycsssharepoint-2010

Creating layered images with CSS Grid

Visit this link for more details I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this: Click here to see the desired result I followed tutorials that demonstrate the same method, but unfo ...

htmlcsscss-gridphoto

"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned dur ...

jqueryhtmlcss

The issue with the Hidden Content feature in the Slick Carousel is that it does not function correctly on the

There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the ce ...

javascripthtmljquerycssslick.js

Accordion in Bootstrap 5.3 behaving independently of data-bs-parent

I am currently working on designing an accordion feature where the headers are displayed in a column on the left side, and when expanded, the content appears in a column on the right side. Everything is working perfectly except for the fact that I have t ...

javascriptcssdjangobootstrap-5

Internet Explorer fails to execute CSS or jQuery commands

Apologies in advance for posing a question that may not be specific or beneficial to the wider community. Currently, my main focus is resolving this issue for my own peace of mind. In the process of designing a website, I implemented a social drawer featu ...

jqueryhtmlinternet-explorerdebuggingcss

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

There seems to be an issue with the display of my page in Chrome - it starts at the middle and ends on the right side. However, when I view it on my server or try it on Internet Explorer 11, it appears centered. Why is that? This problem only arose after ...

htmlcssgoogle-chromewebbootstrap-4