Hovering over an image will not cause the floating header to appear

My attempt to create a header that fades with scroll and appears on hover is working perfectly, except for the cat pictures in the Portfolio section. Despite adjusting z-indexes and trying various solutions, the header just won't show up over the h4 elements or anything below them. The issue seems to be isolated to the portfolio.html file, as the header displays properly over other images. This problem has been driving me crazy! https://github.com/alil0rphan/Basic-Portfolio

/* Eastablish body parameters */
body {
background-image: url("../images/circlesbg.png");
background-color: #D7CFC3;
color: #777777;
margin: 0px auto;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
/* Create Heading block */
h1 {
background-color: #4AAAA5;
display: inline-block;
padding: 25px 20px 0px 20px;
height: 55px;
margin: 0px auto;
font-family: "Georgia", Times, "Times New Roman", serif;
color: #FFFFFF;
font-size: 36px;
}
h1,
h2,
h3 {
font-weight: bold;
}
section {
background-color: #ffffff;
}
/*Establishes header on top */
header {
background-color: #FFFFFF;
border-bottom: solid 2px #cccccc;
margin: 0px auto;
width: 100%;
height: 80px;
top: 0px;
position: fixed;
z-index: 99;
}
/* establishes tranparency on scroll */
body.scrolled #main-menu {
opacity: 0.2;
transition: opacity .2s;
z-index: 98;
}
body.scrolled #main-menu:hover {
opacity: 1.0;
transition: opacity .2s;
z-index: 97;
}
/* Makes sure heading and contents line up */
.banner {
width: 960px;
margin: 0px auto;
height: 60px;
position: relative;
}
/* Navigational link parameters established */
.link-box {
padding: 30px 0px 0px 20px;
height: 55px;
right: 0px;
display: inline;
position: absolute;
}
/* Establishes main content parameters (container and connect blocks) */
.content {
width: 960px;
margin: 0px auto;
}
/* Establish main unique block on each page */
.container {
width: 590px;
border: solid 2px #dddddd;
float: left;
margin: 115px 0px 200px 0px;
padding: 30px;
}
/* Link attributes including hover */
a {
color: #777777;
text-decoration: none;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
word-spacing: 10px;
}
a:hover {
color: #4AAAA5;
}
/* Establishing heading fonts  for container and connect box*/
h2 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 3px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 32px;
}
h3 {
color: #4AAAA5;
font-family: "Georgia", Times, "Times New Roman", serif;
border-bottom: solid 1px #dddddd;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 24px;
}
/* adjusts line height and paragraphs for the about me section */
p {
line-height: 2.5;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
margin-top: 0px;
color: #777777;
}
/* My picture on the index file */
#face {
float: left;
display: inline;
margin-top: 10px;
margin-right: 15px;
width: 250px;
}
/* Connections box parameters with icons */
.connect {
width: 210px;
border: solid 2px #dddddd;
float: right;
margin-top: 115px;
padding: 30px;
}
/* Establish icon aesthetics and behaviors with hover features */
.icons {
display: inline-block;
margin: 0px 5px 30px 0px;
width: 60px;
height: 60px;
}
.icons:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
/* cat pictures and parameters established with hover features*/
.cats {
display: inline-block;
margin: 10px 40px 40px 0px;
width: 230px;
}
.cats:hover {
box-shadow: 4px 4px 2px #4AAAA5;
}
.image { 
   position: relative; 
   display: inline-block;
}
/* establishes parameters for banners over the cat images */
h4 { 
   position: absolute; 
   width: 230px;
   background-color: #4AAAA5;
   color: #FFFFFF;
   font-family: "Georgia", Times, "Times New Roman", serif;
   text-align: center;
   padding: 10px 0px 10px 0px;
   margin: auto;
   left: 0px;
   bottom: 50px;
}
/* Establishes sticky footer */
footer {
background-color: #666666;
opacity: 0.85;
text-align: center;
border-top: solid 6px #4AAAA5;
position: fixed;
width: 100%;
bottom: 0px;
padding-top: 30px;
padding-bottom: 30px;
color: #BFBEBC;
font-size: 10px;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* Establishes input attributes for the contact/ message form. */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px; 
    border: 2px solid #DDDDDD;
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-bottom: 16px; 
    resize: vertical
}
input[type=submit] {
    background-color: #4AAAA5;
    color: #FFFFFF;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
}
/* Makes the Submit button change color when mouse hovers over */
input[type=submit]:hover {
    background-color: #666666;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: #666666;
    opacity: 0.5 !important;
}
label {
color: #8F7E7F;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8>";
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<div id="main-menu">
<header>
<div class="banner">
<h1>John Bendfeldt</h1>
<!-- Navigational links. -->
<div class="link-box">
<a href="index.html">About | </a>
<a href="portfolio.html">Porfolio | </a>
<a href="contact.html">Contact</a>
</div>
</div>
</header>
</div>
<body>
<div class="content">
<!-- Big content box in middle-->
<section class="container">
<h2>Portfolio</h2>
<br>
<!-- Images for the main content block -->
<div class="image">
<img src="assets/images/cat1.jpg" class="cats" alt="kitten">
<h4>Building Websites</h4>
</div>
<div class="image">
<img src="assets/images/cat2.jpg" class="cats" alt="kitten">
<h4>RPG</h4>
</div>
<div class="image">
<img src="assets/images/cat3.jpg" class="cats" alt="kitten">
<h4>Trivia Game</h4>
</div>
<div class="image">
<img src="assets/images/cat4.jpg" class="cats" alt="kitten">
<h4>Rock Paper Scissors</h4>
</div>
<div class="image">
<img src="assets/images/cat5.jpg" class="cats" alt="kitten">
<h4>American Freedom</h4>
</div>
</section>
<!-- connect with me box -->
<section class="connect">
<h3>Connect with Me</h3>
<br>
<a href="https://github.com/alil0rphan" target="_blank"><img src="assets/images/Github-icon.png" class="icons" alt="Github-icon" title="GitHub"></a>
<a href="https://www.linkedin.com/in/john-bendfeldt-b32736130/" target="_blank"><img src="assets/images/linkedin-icon.png" class="icons" alt="linkedin-icon" title="LinkedIn"></a>
<a href="http://stackoverflow.com/users/7700030/john-bendfeldt" target="_blank"><img src="assets/images/stackoverflow-icon.png" class="icons" alt="stackoverflow-icon" title="Stackoverflow"></a>
</section>
</div>
</body>
<footer>
© Copywrite 2017 John Bendfeldt
</footer>
<!-- makes the header transparent on scroll -->
<script type="text/javascript">
window.addEventListener('scroll', function () {
  document.body.classList[
    window.scrollY > 20 ? 'add': 'remove'
  ]('scrolled');
});
</script>
</html>

`

htmlcss

Answer №1

One solution could be to include the CSS property position: absolute; within the selector body.scrolled #main-menu. When implemented, it will result in the following styling:

body.scrolled #main-menu {
    opacity: 0.5;
    transition: opacity .3s;
    z-index: 100;
    position: absolute;
}

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

What is the best way to assign specific codes to separate pages using a single JS file?

I am currently working on a project that involves an authentication JavaScript which is responsible for managing user sign-ins and registrations. However, there are certain lines of code within this script that impact different pages in various ways. I n ...

javascripthtmldom

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

javascripthtml

How can you add padding to an HTML page using CSS?

I've been attempting to use padding-bottom:90px; in order to shift Tweets by ‎@StackOverflow (the entire tweets section) downwards on the page. I want to move it further down using the above padding, but it doesn't seem to be working for me. H ...

htmlcssasp.net

Separating stylesheets, head, and other elements in a curl response

After successfully using curl to retrieve an external site, I noticed that the results were interfering with my own content. The CSS from the external site was affecting my webpage's layout and z-index values were conflicting. I am seeking a solution ...

javascriptphphtmlcsscurl

How to Extract Minutes in Datatables Timestamps and Apply Custom Styling

Working with Datatables v1.10 Right now, my table is showing a date in the second column in the format 17-04-2019 14:34, which is how it's stored in the database. The filtering and searching functionality are all working as expected. The current HTM ...

javascriptjqueryhtmlcssdatatable

What is the process for modifying two IDs simultaneously?

I'm struggling to include more than one ID in my CSS. I want the box border to have four different hover effects and three gradient buttons (e.g., play, pictures, etc.). Here is my HTML: <h2><a id="hover-1" href="">Hov ...

htmlcss

Automatically scroll the chat box to the bottom

I came across a solution on Stackoverflow, but unfortunately, I am having trouble getting it to work properly. ... <div class="panel-body"> <ul id="mtchat" class="chat"> </ul> </div> ... The issue lies in the JavaScript t ...

javascriptjqueryhtmlcss

Versatile accordion with separate functionalities for items and panels

When I have different functions for clicking on item and title, clicking on the item works fine but clicking on the panel triggers both functions. Is there a way to resolve this so that I can click on the item using Function_1 and click on the panel using ...

javascripthtml

Layering one canvas on top of another

Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas. My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on the second canv ...

csshtmlcanvas

How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item. Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li>&l ...

jquerycss

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

javascripthtmlseleniumjquery-selectorshtml.dropdownlistfor

What is the best way to place two span elements beside each other?

Is there a way to align the name and address on the same line, with the address positioned on the right and the name on the left? Currently, the address is appearing on a separate line from the name. How can I resolve this issue? Here is the provided cod ...

htmlcss

I'm having trouble keeping my navbar fixed

Having trouble keeping my navigation bar fixed I attempted using the <nav class="fixed-nav-bar> with no success. I also tried adjusting it in CSS, but it still wouldn't stay fixed. <nav role="navigation" class="navbar navbar-default"> ...

javascripthtmlcss

The value from the textbox is not being received by the JavaScript and PHP

I'm encountering an issue with my codes where they are not properly passing the value of the verification code from the textbox to JavaScript and then to PHP. I need assistance in resolving this issue. Below is the snippet of code: HTML: /* HTML c ...

phpjavascripthtmltextboxpasswords

Fill the next Thursday with JavaScript

I'm having trouble updating the date for the upcoming Thursday using JavaScript. The current script works fine until the end of the month, but if it's the 25th of August, the output will be "Next Thursday - 8/32/2022". I need a more intelligent s ...

javascripthtmldate

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

After creating a WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera, and CanvasTexture, I am now trying to enhance the scene by adding "HotSpots" over specific areas of the SphereGeometry. However, I am facing difficulty in updating th ...

javascriptcssthree.js

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

htmlcssbackground-image

Creating a wider background color for active nav bar links in CSS - A step-by-step guide

I've been working on customizing a CSS navbar and I've managed to get it to work as desired. However, I'm facing an issue with the active state background color, which seems to be the same width as the text itself. I've spent hours sear ...

cssreactjsbootstrap-5

Changing the animation associated with a hover action - tips and tricks!

My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...

htmlcssvue.jshovercss-animations

The Video Element Is Not Expanding to Fill the Entire Parent Div

My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I' ...

htmlcss