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

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

javascriptjqueryhtmlcss

Is it possible to include all the information in a form submission, not just the inputs?

I have a problem with submitting the form and accessing all the variables I need. When I check the $_POST variable, I only see the values of the form inputs. Is there a way to also send other variables like the content of multiplicator1? How can I achiev ...

phphtmlformspost

Tips for displaying an image that is embedded within a CSS file

I discovered an interesting background image embedded in a CSS file. Is there a way for me to actually view it? "iVBOR..." to "5CYII=" and saved it in a file named image.png - unfortunately, this method did not yield the desired outcome.

...

cssimagepngembedded-resource

Using a PHP variable to trigger the jQuery .show() function

I'm attempting to trigger jQuery .show() events based on PHP variables. Below is my PHP code (retrieved from a form submission on another page): $last_pic_displayed = trim($_POST["last_pic_displayed"]); if (strlen($last_pic_displayed) <= ...

javascriptphpjqueryhtml

What is the best way to display a success notification when a transaction is successfully executed in web SQL

var brand = "Glare"; var price = "3000$"; var color = "blue"; var success = tx.executeSql("INSERT INTO truck (brand, price, color) VALUES ('"+brand+"','"+price+"','"+color+"' ")"); if(success) { alert("successfully insert ...

javascriptjqueryhtml

The directive for Content Security Policy in Django framework

I am having trouble importing font-awesome into my application. I've tried the following code: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> However, this is causing an err ...

cssdjangogoogle-app-engine

Setting a static width for a specific cell in HTML5 - What's the best way to go about it?

When working with HTML5, how do I define a specific width for a table cell? Many of the <col> properties that were present in HTML4 are no longer applicable in HTML5. Just to clarify, I am aware that I can use <td style="width:150px">, but thi ...

csshtml

Having trouble with script tag not loading content in Next.js, even though it works perfectly fine in React

Currently, I am attempting to utilize a widget that I have developed in ReactJS by utilizing script tags as shown below- React Implementation import React from "react"; import { Helmet } from "react-helmet"; const Dust = () => { ...

javascriptcssreactjsnext.jsreact-widgets

I've recently delved into the world of JavaScript and am currently working on creating a calculator website. However, I'm facing some challenges in getting it to function

I created a calculator code using HTML, CSS, and JavaScript for a website. However, due to my limited experience with JavaScript coding, I encountered some issues. Currently, I have only implemented the number input part (not operations or deletion), but w ...

javascripthtmlweb

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

Is it possible to identify when a key is pressed on any part of an HTML webpage?

I am currently seeking a solution to detect when a key is pressed on any part of an HTML page, and then showcase a popup displaying the specific key that was pressed. While I have come across examples of achieving this within a textfield, my goal is to m ...

htmlonkeypress

What steps should I take to address the issues with my quiz project?

I've been working on a new project that involves creating a quiz game. I came across some code online and decided to customize it for my needs. However, I'm encountering some issues with the functionality of the game. Right now, the questions ar ...

javascripthtmlbuttondom-events

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

javascripthtmltwitter-bootstrap

Steps for aligning floating DIVs in the center of a parent DIV

Why is the text alignment not working as expected when I have three divs within a parent div that need to be center aligned? If you'd like to see the issue in action, check out this Demo fiddle <div class="container_alt"> <div class= ...

htmlcss

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

Clicking does not trigger scrollIntoView to work properly

I'm facing an issue with a button that is supposed to scroll the page down to a specific div when clicked. I implemented a scrollIntoView function in JavaScript and attached it to the button using onClick. Although the onClick event is functioning as ...

javascripthtmljquery

Sticky positioning causes elements to stick to the window as the

https://i.stack.imgur.com/nv3vU.png I am facing an issue with a position sticky block that can vary in height relative to the window size. Sometimes, the block is taller than the viewport, making it impossible to scroll to see all the content. Is there a ...

javascripthtmlcsscss-position

Retrieving Table Characteristics from an Online Source

Currently utilizing Python 3.4, Windows 10, and Visual Studio 2015 for my project. I am in the process of developing a program that scrapes phone numbers from websites similar to this one. My approach involves using Beautiful Soup 4 to extract the number ...

pythonhtmlvisual-studiobeautifulsouppython-3.4