CSS-Only Menu Fails to Function with Image Overlayed on Top

I need help with a website I created where I want the header to be placed slightly on top of my CSS menu. However, when I overlay an image, I lose my CSS menu and I am looking for a way to keep it while still displaying the image.

My goal is to have the CSS menu in the NAVI div positioned underneath the last image in the topLayer div.

If anyone could provide me with a solution or explanation, that would be greatly appreciated.

http://jsfiddle.net/hjkopytko/AfWD5/

HTML:

<body>
<div class="wrapper">
  <header>
    <div class="topLayer">
     <a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
                style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50" 
                style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103" 
                    style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
   </div><!-- end of topLayer-->

...

  </footer>
</body>
htmlcss

Answer №1

Take a look at this interesting query: How to Click through a DIV to underlying elements

This solution might just do the trick for you. Simply include pointer-events:none; in your overlaid image.

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

Visible background between div elements

There seems to be a background color visible between the image divs. I initially suspected it could be related to margins. Even after attempting to set the div to absolute positioning and the parent to relative, the problem persists. The picture still fail ...

htmlcssimagebackgroundposition

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

Tips for aligning an element in the center in relation to its sibling above

Help Needed with Centering Form Button https://i.sstatic.net/QhWqi.png I am struggling to center the "Send" button below the textarea in the form shown in the image. Despite trying various methods like using position absolute, relative, and custom margin ...

javascripthtmlcssreactjsbootstrap-4

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

javascriptjqueryhtmleach

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

I need help with a specific pseudo-class selector issue. Even with !important, the text in the li:first-child element is not appearing in blue. The selector specificity for p is: (0, 0, 1) The selector specificity for li:first-child is: (0, 1, 1) I want ...

htmlcsscss-selectorscss-specificity

Activate Jquery as the user navigates through it with scrolling

Is there a way to activate a JQuery event when the user first scrolls over a particular div? I attempted to utilize waypoint for this purpose, but unfortunately, it did not work as expected. Below is the code I used with no errors: var waypoints = $(&apo ...

javascriptjqueryhtml

<div.content> </div.content> - Structure

I recall encountering this code before but I can't remember where: <div.main> // .... </div.main> <div.secondary> // .... </div.secondary> Could someone please clarify for me what this syntax is referred to as and what ...

htmlcssreactjsreact-nativesass

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

javascriptjqueryhtml

Unexpected output from Material UI Textfield

When attempting to print a page of my React app using window.print(), everything prints correctly except for the Textfield component from Material UI. It works fine when there are only a few lines of text, but when there is a lot of text, it appears like t ...

htmlreactjsprintingmaterial-uitextarea

Minimizing the distance between radio label rows

I'm working on a radio button with a label spanning two lines, but the whitespace between the lines is too much. I need to reduce it. Here's my code example: <label for="reg-promo"> <input type="radio" name="promotion" id="registerPr ...

htmlcssvue.jsradio-button

The validation of radio input signals results in an error being returned

For a while now, I've been trying to solve the issue with radio button validation in my current project. Surprisingly, it works fine when there are no other functions in the form besides the radio buttons themselves. I suspect that the problem lies wi ...

javascripthtmlvalidation

Track when a user modifies a <select> dropdown list generated using the Jquery method ".html()"

Is it possible to detect a change in the value of a select list when that select list has been added using either the .html(htmlString) or .append(content[,content]) jQuery function? HTML CODE: <ul class="htmlClass"> <!-- Populated via JS --& ...

javascriptjqueryhtml

Header should elegantly glide up and down as the user scrolls through the page

I've implemented a top div on my page that houses contact details and social media links. I've managed to hide it during scrolling and make it reappear when reaching the top of the page. However, I'm hoping to smoothen this transition with a ...

javascriptjqueryhtmlcssbootstrap-4

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation

PHP library dompdf is having issues when rendering CSS styles

Trying to convert HTML with CSS styles into a PDF using dompdf. The CSS includes floats as well. Below is the snippet of my CSS and HTML code: $dompdf = new DOMPDF(); //create object //load html with css $dompdf->loadHtml('<html> <head ...

phphtmlcssdompdf

Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines. https://i.stack.imgur.com/CcDeL.png Code: .Footer { width: 100%; display ...

htmlcss

Do CSS Modules consistently generate the same class name for a specific CSS class defined within the module?

I have defined the following classes in my CSS module: .container-styles { height: 20px; width: 90%; background-color: rgb(128 , 128 , 128); } .filler-styles { height: 100%; border-radius: inherit; background-color: rgb(27, 150, 40); text-al ...

htmlcssreactjscss-modules

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

Tips for effectively implementing grids within bootstrap modal dialogs?

Exploring the functionality of the bootstrap-5 grid system within a modal popup has raised a puzzling issue. To investigate further, I began by incorporating the grid example into the main modal template sourced from https://getbootstrap.com/docs/5.0/compo ...

csstwitter-bootstrapbootstrap-5