The transparent image is causing the menu item to be hidden underneath it because of z-index complications

Could you please review this jsfillde? 

<nav role="navigation" class="nav-main">
    <ul class="nav nav-pills" id="menu-primary-navigation">
        <li class="active menu-home"><a href="/">Home</a></li>
        <li class="menu-about-us"><a href="/about-us/">About Us</a></li>
        <li class="menu-program"><a href="/program/">Program</a></li>
        <li class="menu-events"><a href="/events/">Events</a></li>
        <li class="menu-donate"><a href="/donate/">Donate</a></li>
        <li class="menu-contact"><a href="/contact/">Contact</a></li>
    </ul>    
</nav>

The "about us" link appears to be unclickable due to the image positioned next to it. I have experimented with different z-index values but without success.

Do you have any suggestions on how to resolve this issue?

htmlcss

Answer №1

Here's a quick and easy fix: Add "z-index:1000"

<nav class="nav-main" role="navigation" style="z-index:1000;">
  <ul id="menu-primary-navigation" class="nav nav-pills">
    <li class="active menu-home"><a href="/">Home</a></li>
    <li class="menu-about-us"><a href="/about-us/">About Us</a></li>
    <li class="menu-program"><a href="/program/">Program</a></li>
    <li class="menu-events"><a href="/events/">Events</a></li>
    <li class="menu-donate"><a href="/donate/">Donate</a></li>
    <li class="menu-contact"><a href="/contact/">Contact</a></li>
  </ul>
</nav>

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

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

So, I've got this situation where when clicking on a Table Row, it opens a modal thanks to ng-click. <tr ng-repeat="cpPortfolioItem in cpPortfolioTitles" ng-click="viewIndividualDetailsByTitle(cpPortfolioItem)"> But now, there&apos ...

javascriptjqueryhtmlangularjscheckbox

Fixed-bottom footer in Bootstrap 5 that overlays content

Having trouble creating a fixed footer using the fixed-bottom class in react & bootstrap. The issue is that it's covering some content and I've tried various solutions without success. Any suggestions on how to fix this? (Code and Demo provided b ...

javascripthtmlreactjsfooterbootstrap-5

The Codepen demo for SemanticUI is not functioning properly

Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...

javascripthtml

Change the Label in a TextField Component with Material UI

How do I customize the label of a TextField and prevent a grey background color from appearing after selecting an item in Material UI? To view the solution, please visit this CodeSandbox link: CLICK HERE Label Customization Issue: Grey Background Color ...

cssreactjsmaterial-uijss

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

5 Ways to Incorporate Font Awesome Icons into CSS Pseudo Elements

I'm attempting to incorporate FontAwesome icons into CSS pseudo elements. When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes whe ...

cssfont-awesomepseudo-element

Transparent dropdown elements using Bootstrap

I'm trying to incorporate a transparent bootstrap dropdown into my form. Specifically, I want the button itself to be transparent, not the dropdown list that appears when the button is clicked. Here's an example of what I currently have: https: ...

csstwitter-bootstrapdropdown

The utilization of `ngSwitch` in Angular for managing and displaying

I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...

htmlangulartypescript

JavaScript - Modify input character prior to appending it to the text area

I am working on creating a virtual keyboard using jQuery. Whenever I press 'a' in the textarea, I want it to display 'z' instead. In my investigation of typing a letter in the textarea, I discovered the following sequence: keyDown ev ...

javascriptjqueryhtml

I can't seem to figure out why this file upload error is happening. What could be the

Having trouble with a simple file upload function and keep getting an "Error" message when trying to use it. Here's my HTML file: <form enctype='multipart/form-data' action='upload.php'> <input type='file' name ...

phphtml

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke

Displaying article title above container with backdrop picture

Currently, I am working on a specific layout design using Bootstrap 5 where I am trying to render a tag outside its original container so that it takes up the full width of the page. My attempts with absolute positioning on the img tag have proven to be ch ...

cssbootstrap-5

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

css

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

htmlcss

How to eliminate ampersands from a string using jQuery or JavaScript

I'm having trouble with a seemingly simple task that I can't seem to find any help for online. My CSS class names include ampersands in them (due to the system I'm using), and I need to remove these using jQuery. For example, I want to chan ...

javascriptjqueryhtmlcss

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js

What is React.js's approach to managing CSS files?

Currently, I am enrolled in Bootcamp at Scrimba where they utilize an online platform for teaching various courses. One of the topics covered is React and involves working with CSS files. When working on my local machine, I typically use the index.css file ...

javascripthtmlcssreactjs

Manipulate the CSS of a single div within a group of divs that have the same class using jQuery

I'm attempting to modify the CSS of a specific DIV that shares its class with other divs. I've searched for a solution but haven't had any luck so far. Here is the code I've been using without success: $(".singleOffer").click(functio ...

javascriptjqueryhtmlcss

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design