Recently, I encountered an issue with my drop-down menu where it goes behind another div when hovered over. This causes the drop-down menu to not be fully visible.
I tried adjusting the z-index thinking it would solve the problem, but unfortunately, it didn't make any difference.
Remember to include z-index: 9; in the selector #navbar.
Here is the updated code:
* {
font-family: "comic sans ms";
}
.spacer {
width: 100%;
height:95px;
}
/* Navigation bar */
#navbar {
width: 100%;
height: 50px;
background-color: deeppink;
position: fixed;
margin-top: 5;
left: 0;
color: yellow;
/* non-selectable text */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 9; /* Updated line */
}
.logo {
height: 50px;
float: left;
}
.navbutt {
background-color: yellow;
border: none;
color: orange;
height: 50px;
width: 80px;
font-size: 12px;
}
#comics {
margin-left: 7px;
}
#login {
float: right;
margin-right: 10px;
}
#login-text {
text-align: center;
padding-top: 3px;
}
/* Dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
color: orange;
background-color: yellow;
margin-top: 5px;
min-width: 80px;
z-index: 99;
}
.dropdown-content a {
color: orange;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
color: yellow;
background-color: orange;
}
.navbutt:hover {
color: yellow;
background-color: mediumvioletred;
}
/* Image upload form */
.form-right {
position: relative;
float: right;
margin-right: 100px;
}
/* Page Listbox */
.pagelist {
background-color: skyblue;
position: relative;
float: right;
width: 20%;
height: 70%;
overflow-y: scroll;
}<!DOCTYPE html>
<html>
<head lang="de">
<meta charset = "UTF-8" />
<title>komix.lit - home page</title>
</head>
<body>
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">home</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">komics</button>
<div id=login class="navbutt dropdown"><p id='login-text'>dicctator</p><div class='dropdown-content'><span id='login-text'><a href='login.php' id='dropdown-url'>logout</a><a href='newkomix.php' id='dropdown-url'>new Komix</a><a href='mykomix.php' id='dropdown-url'>my komiks</a></span></div></div></div>
<div class="spacer"></div>
<div class="content"><img src='komix\13_03_18_08_20_25-2.jpg' /><div class="pagelist"><ul><li><a href='pages.php?id=51'>Page 1</a></li><li><a href='pages.php?id=55'>Page 2</a></li><li><a href='pages.php?id=54'>Page 3</a></li><li><a href='pages.php?id=52'>Page 4</a></li><li><a href='pages.php?id=53'>Page 5</a></li></ul></div>
</div>
</body>
<footer>
</footer>
</html>If you don't explicitly set the z-index in CSS, the bottom-most element will automatically have a higher z-index. This is why your navbar content may be going behind other elements. To fix this issue, make the following changes:
#navbar {
width: 100%;
height: 50px;
background-color: deeppink;
position: fixed;
margin-top: 5;
left: 0;
color: yellow;
z-index: 10; // Important line
/* Make text non-selectable */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
When the text field is disabled, I want to change its color. Below is the code I have written for enabled and disabled states. The style works correctly when the text field is enabled. const StyledTextField = styled(({ dir, ...other }) => <TextFiel ...
I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image. Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the imag ...
My goal is to utilize HTML5 on the client side in order to convert an "image object" into a "File object" for uploading to azure blob storage. I am working with AngularJs and my approach involves: Converting the image to a file Uploading the file to blob ...
What is the best way to enable server A to communicate with server B, when A is accessible through a public URL and B is located on the same network? For instance, one approach could be for A to send a signal to wake up B. At present, I have an elementary ...
I have a series of HTML pages, each with a line at the top that reads: <?xml version="1.0" encoding="UTF-8" ?> When I was working on localhost, the pages opened without any issue. However, now that I have uploaded the files to the server, I am enco ...
I'm currently working on implementing a SVG path animation that activates on hover and reverses when the mouse is moved away. How can I pause the animation if the mouse moves out before the initial animation completes, and then reverse it from that p ...
Having trouble with Jquery Validation on dynamically populated fields. In my asp.net project, I need the name fields to remain constant because I split an array of information on the server side and update a database. <form id="insert_additions" action ...
Issue I am facing a problem where I need to utilize the select tag in order to choose a value and then send that value via an ajax call to a PHP script embedded within the same page. In my code, I have implemented the select tag and upon selecting a valu ...
I managed to give 3 tooltips different colors using JavaScript and data-toggle like this <span class="tooltipjs" data-toggle="sin-datos" data-placement="right" data-original-title="some text">A</span> $( ...
I currently have a div element that includes an image element along with multiple other div elements containing small text displayed above the image. I am looking to save the image along with its content to a new image file. Any suggestions or ideas are ...
I've been experimenting with Select2 and following the instructions on their website (). I tried adding the URI to my HTML file and created a basic dropdown menu for selecting two states. However, when I tested it, Select2 didn't seem to work at ...
Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...
My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...
As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...
Recently, I delved into the realm of cookies for the first time and managed to successfully save some data. The numbers I stored are crucial because I need to perform arithmetic operations like addition and subtraction on them. However, when attempting to ...
I recently created a form on my website located at . Initially, the form functioned correctly and the PHP script executed as expected. However, I am now encountering an issue where every time I load the page, a popup message appears indicating that the for ...
I'm encountering an issue with my code and I am unsure of how to fix it. The current state of my code is different from the desired outcome https://i.sstatic.net/Ti1kK.jpg As you can see, the image above does not match the appearance of the image I ...
Attempting to pick out the hyperlink text from a table cell when the desired text is also present in the cell Following an answer in that discussion, I have reached this point with my query. This is my current progress: def click_me(myString): WebDr ...
I'm attempting to alter an existing solution here by incorporating a total of 7 divs that have fading in and out effects, all within the same space on the page. The sequence should loop back to the initial div after reaching the end. In addition, I r ...
What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...