I am writing a web and the drop-down menu button is not working. The hoverable content is not shown. May anyone tell me the reason, please. Thanks a lot!!!
Here is the code
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:100%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
The whole codings are shown above. I am not sure about the problem, yet it should be the CSS styling issues. Please someone give me a hint. Thank you very much!
You have several issues in both your HTML and CSS to solve, so the menu will work correctly.
First: The <div class="dropdown"> should contins the button, image and dropdown-content inside </div>
for example, change:
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
to
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
<br /><br />
<img src="menu.jpg" alt="Menu">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
Second: in the style of .dropdown-content, using of position: absolute; is correct but you should change left:100%; to left:0;, therefore you get the dropdown-content beside the menu-item.
Third: Add the CSS style code for hovering over the menu item, to make the sub-menu-item appears as:
.dropdown:hover .dropdown-content{
display: block;
}
Fourth: Change the background of the sub-menu-item when hovering, for example
.dropdown-content a:hover {
color: white;
background-color: red;
}
if you make the above four points, the menu will behave as expected.
and here is the full modified code of the question- just press Run the code snippet below:
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:0; /* Modified */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* adding */
.dropdown:hover .dropdown-content{
display: block;
}
/* adding */
.dropdown-content a:hover {
color: white;
background-color: red;
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Title"></button>
<br /><br />
<img src="menu.jpg" alt="MenuItem">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
Related
I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
I am having a hard time on how to re-arrange my HTML/CSS code in order to move a few links inside of a hamburger nav menu.
I would like to have 'home' always visible but then, I would like the other linked pages to fall inside the hamburger menu, only visible when clicking the menu...
I would like the following to be inside the hamburger menu:
About
Contact
Portfolio ,etc.
Any suggestions on how to achieve this?
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
What you are looking for is called toggle. For this you need to use javascript or jquery (a simplified javascript "version"). To easy explain this, put for example a parent div for the child elements you want to toggle. Then in your css display this parent div none. Then you use jquery to be able to tell what you want to be clickable and then later what you want to toggle.
//Script.js
$(document).ready(function(){ //Use ready to make a function available after the document is loaded
$(".nav").click(function(){
$("#hamburger").toggle(250);
});
});
/* Style.css */
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: table-cell;
}
.header-logo img {
height:100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 30px;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 10px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div{
width: 30px;
}
#hamburger{
display:none;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js">
</head>
<header>
<div class="header-logo">
<img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul> <li>Home</li></ul>
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div id = "hamburger">
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</div>
<div class="sub">
<li>Subscribe</li>
</div>
</a>
</ul>
</nav>
</header>
Edit: I added the src to the new script.js file which should contain your click function:)
Don't think you could achieve what you want only using CSS, maybe with a lot of CSS "hacks". I'd suggest adding some javascript to show on click.
I'd recommend checking this page https://www.w3schools.com/howto/howto_js_mobile_navbar.asp since they have an example just like the one you trying to achieve.
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>
I am trying to have a drop down menu while having a reptile image as the background, but I can't seem to have the drop down menu working with the image in it? When I take the image out, it works. I'm not sure if it's just because of the that are being mixed up, or maybe it's a typing error, but I've looked and can't find any?
Another question is why my background color gradient (the gradient not reptile.png background one) is only showing only half the page. If you make the window smaller, it shows white and doesn't look good. I've tried using width/height : 100% 100%, cover, and tried stretching the image as height but it's not working. I would like to have the image stretch to the height and width of the page. I think it may be due to something about the body height, but I am not sure how to change that.
Here is the code
header {
text-align: right;
text-shadow: none;
background-color: #a7a7a7;
}
body {
background-image: linear-gradient(#545454, #000000);
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Gill Sans, "sans-serif";
color: #f2fdec;
font-size: 3em;
text-shadow: 2px 2px 2px #000000;
padding: 0.2em;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
opacity: 0.5;
}
h3 {
font-size: 18px;
font-family:
}
nav {
font-weight: bold;
float: right;
color: #c1c1c1;
font-size: 18px;
padding: 8px 8px 8px 8px;
}
nav a:link {
color: #f3ffe7;
text-decoration: none;
}
nav a:visited {
color: #f3ffe7;
text-decoration: none;
}
nav a:hover {
color: #f3ffe7;
text-decoration: none;
}
nav ul {
list-style-type: none;
}
nav a {
text-decoration: none;
}
nav ul ul {
position: absolute;
background-color: #474747;
padding: 0;
text-align: center;
display: none;
}
nav ul ul li {
border: 1px solid #00005D;
display: block;
width: 4em;
padding-left: 1em;
margin-left: 0;
}
nav li:hover ul {
display: block;
}
footer {
font-size: 10px;
text-align: center;
background-color: #474747;
padding: 8px;
text-shadow: none;
color: #d2d2d2;
position: absolute;
left: 0;
width: 100%;
bottom: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
header,
nav,
footer {
display: block;
}
.container {
position: relative;
text-align: center;
color: white;
}
.herp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4f4f4f;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #696969;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reptile Website</title>
<link rel="stylesheet" href="home.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header><nav><ul>
<div class="dropdown">
<button class="dropbtn">Home</button>
</div>
<div class="dropdown">
<button class="dropbtn">Lizards</button>
<div class="dropdown-content">
Geckos
Chameleons
Skinks
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Big Lizards</button>
<div class="dropdown-content">
Iguanas
Tegus
Monitors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Turtles</button>
<div class="dropdown-content">
Turtles
Tortoises
Terrapins
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Snakes</button>
<div class="dropdown-content">
Colubrids
Pythons
Constrictors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Ambibians</button>
<div class="dropdown-content">
Newts
Salamanders
Frogs and Toads
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Expertise</button>
<div class="dropdown-content">
Beginner
Intermediate
Complex
</div>
</ul></nav></header>
<div class="container">
<img src="reptile.png" alt="Reptile Background">
<div class="herp">Explore Herping<br>
<h3>Your home for Herpetology Information</h3> .
</div>
</div>
<footer>
<p>Sasha Batz | s1467218#student.mcckc.edu</p>
</footer>
</div>
</body>
</html>
First Question:
That image make its parent element .container cover the dropdown menu, so you cannot hover the dropdown menu.
You can use z-index to put it on the top:
.container {
z-index: 10;
}
.container img {
z-index: 11;
}
nav {
z-index: 1001;
}
And don't make the text Your home for Herpetology Information at the top of menu.
Second Question:
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels.
So you need to add this to your css code:
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
}
html {
height: 100%;
}
header {
text-align : right;
text-shadow : none;
background-color : #a7a7a7;
}
body {
background-image : linear-gradient(#545454, #000000);
background-size : 100% 100%;
background-repeat : no-repeat;
font-family : Gill Sans, "sans-serif";
color : #f2fdec;
font-size : 3em;
text-shadow : 2px 2px 2px #000000;
padding: 0.2em;
height: 100%;
}
.container {
z-index: 10;
}
.container img {
z-index: 11;
}
.container .herp {
z-index: 11;
}
.container .herp h3{
z-index: 12;
}
nav {
z-index: 1001;
}
img {
max-width: 100%;
max-height : 100%;
height: auto;
opacity : 0.5;
}
h3 {
font-size : 18px;
font-family :
}
nav {
font-weight : bold;
float : right;
color : #c1c1c1;
font-size : 18px;
padding : 8px 8px 8px 8px;
}
nav a:link {
color : #f3ffe7;
text-decoration : none;
}
nav a:visited {
color : #f3ffe7;
text-decoration : none;
}
nav a:hover {
color : #f3ffe7;
text-decoration : none;
}
nav ul {
list-style-type : none;
}
nav a {
text-decoration : none;
}
nav ul ul {
position : absolute;
background-color : #474747;
padding : 0;
text-align : center;
display : none;
}
nav ul ul li {
border : 1px solid #00005D;
display : block ;
width : 4em;
padding-left : 1em;
margin-left : 0;
}
nav li:hover ul {
display : block;
}
footer {
font-size : 10px;
text-align: center;
background-color: #474747;
padding : 8px;
text-shadow : none;
color : #d2d2d2;
position : absolute;
left : 0;
width : 100%;
bottom : 0;
}
#wrapper {
width: 100%;
height : 100%;
}
header, nav, footer {
display : block;
}
.container {
position: relative;
text-align: center;
color: white;
}
.herp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 1005;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4f4f4f;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #696969;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reptile Website</title>
<link rel="stylesheet" href="a.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header><nav><ul>
<div class="dropdown">
<button class="dropbtn">Home</button> |
</div>
<div class="dropdown">
<button class="dropbtn">Lizards</button> |
<div class="dropdown-content">
Geckos
Chameleons
Skinks
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Big Lizards</button> |
<div class="dropdown-content">
Iguanas
Tegus
Monitors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Turtles</button> |
<div class="dropdown-content">
Turtles
Tortoises
Terrapins
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Snakes</button> |
<div class="dropdown-content">
Colubrids
Pythons
Constrictors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Ambibians</button> |
<div class="dropdown-content">
Newts
Salamanders
Frogs and Toads
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Expertise</button> |
<div class="dropdown-content">
Beginner
Intermediate
Complex
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Care</button>
<div class="dropdown-content">
Leopard Gecko
Bearded Dragon
Kenyan Sand Boa
</div>
</div>
</ul></nav></header>
<div class="container">
<img src="reptile.png" alt="Reptile Background"/>
<!-- <div class="herp">Explore Herping<br>
<h3>Your home for Herpetology Information</h3></div> -->
</div>
<footer>
<p>footer</p>
</footer>
</div>
</body>
</html>
I am converting my desktop menu in the mobile menu, but the code is not working.
I am using checkbox trick, when checkbox is checked the menu will appear, otherwise menu display will be none.
At 1280px my desktop will switched into mobile, but it's not working properly as expected.
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soofyantheband</title>
<link rel="stylesheet" href="assets/css/style2.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/mini-nav_bar.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>
<!-- Webpage Wrap inside "wrapper" -->
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li >Events</li>
<li >Projects</li>
<li >Unplugged</li>
<li >Gallery</li>
<li >Videos</li>
<li >About</li>
<li >Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
display:none;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu ul li a{
display: block;
}
}
There were some issues in your code.
This line #toggle:checked + .menu ul li a won't work. .menu is not a sibling of #toggle, it is a child of a sibling (header). Instead, use the general sibling combinator (~) to target the header.
You set display: none for the ul and li, but then only changed the display type for the ul. Setting display: none for the ul is sufficient.
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
.nav {
/*border-bottom: 1px solid #EAEAEB;*/
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu ul li {
clear: right;
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 1280px) {
label {
display: block;
cursor: pointer;
}
.menu ul {
text-align: center;
width: 100%;
display: none;
}
.menu ul li a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked ~ header .menu ul {
display: block;
}
}
<div id="wrapper">
<!--1.Header Section-->
<div class="header">
<div class="container">
<div class="nav">
<input type="checkbox" id="toggle" />
<label for="toggle">☰</label>
<header>
<div id="band_Logo">
</div>
<div id="menu" class="menu" style="line-height:94px; ">
<ul style="margin:0">
<li>Home</li>
<li>Events</li>
<li>Projects</li>
<li>Unplugged</li>
<li>Gallery</li>
<li>Videos</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</header>
</div>
</div>
</div>
</div>