When I resize the screen for mobile devices and I hover over links in menu, nothing happens. I don't understand what is wrong. Funny thing is, when I click on the link, the color changes to what it should be when I hover. I tried hover over li and a and both are non functional. Did I miss something?
<nav id="myNav">
<div class="menu-icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<div class="top-nav">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Work</li>
</ul>
</div>
</nav>
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: all 1.5s;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.menu li:hover {
background-color: rgba(240, 255, 255, 0.3);
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
#media only screen and (max-width: 769px) {
nav ul {
max-height: 0px;
background: #000;
}
.show-menu {
max-height: 400px;
}
.menu li:hover {
background-color: azure;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
display: block;
}
nav ul li a {
display: block;
font-size: 26px;
}
Problem is when it hits the media size your max list height is 0px. So it will not render Visibly
#media only screen and (max-width: 769px) {
nav ul {
max-height: 0px;
background: #000;
}
Remove the max-height: 0px;
function myFunction() {
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: all 1.5s;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.menu {
background-color: lightgray;
}
.menu li:hover {
background-color: green;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
#media only screen and (max-width: 769px) {
nav ul {
background: #000;
}
.show-menu {
max-height: 400px;
}
.menu li:hover {
background-color: red;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
display: block;
}
nav ul li a {
display: block;
font-size: 26px;
}
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<nav id="myNav">
<div class="menu-icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<div class="top-nav">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Work</li>
</ul>
</div>
</nav>
Related
I'm just starting out with web coding and I don't have much knowledge with css. I think I made some mistakes and I hope I can find a solution here. The issue is when dropdown item opens, "Add New" slipping sideways. How i can fix this problem? Here is my HTML an CSS code. When i write position: absolute; dropdown menu is dissappering too. I'm
nav {
background-color: #c1c1c1;
height: 75px;
}
nav .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
nav .logo img {
height: 56px;
width: 56px;
padding-top: 8px;
}
.logo {
width: 30%;
}
.nav-items {
display: flex;
}
.menu {
float: right;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu ul li {
float: left;
padding-left: 10px;
}
.menu ul li a {
padding: 8px;
color: black;
text-decoration: none;
}
.menu-item-has-children {
position: relative;
display: inline-block;
}
.menu-item-has-children ul {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-item-has-children ul li {
float: none;
}
.menu-item-has-children ul li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-item-has-children:hover ul {
display: block;
}
.menu-item-has-children:hover ul li a:hover {
background-color: #f1f1f1
}
<!DOCTYPE html>
<html>
<head>
<title>NAVBAR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav-first">
<div class="container">
<div class="nav-items">
<div class="logo">
<img src="https://www.postakutun.com/wp-content/uploads/2020/08/cropped-logo-png-120p-2.png" alt="Logo">
</div>
<div class="menu">
<ul class="menu-ul">
<li>Home</li>
<li>Privacy</li>
<li>Contact</li>
<li class="menu-item-has-children">Profile
<ul>
<li>My Profile</li>
<li>Security</li>
<li>Options</li>
</ul>
</li>
<li>Add New</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>
I am a developer in training and I was trying to get this code to show a drop down menu when hovering over the list items "Music" and "Podcasts". But I can't seem to get it to work, what am I doing wrong?
I found some people doing the same thing, but my list never shows, which is logical of course because of the display: none; but I would like it to show after hovering over Music or Podcasts. Sorry, but I am still learning if it is messy/bad.
body {
background-image: url(../images/top.png), url(../images/achtergrond.png);
background-size: cover ;
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
img {
width: 1000px;
height: 400px;
}
.navbar{
margin: auto;
width: 50%;
padding: 10px;
}
.list{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
list-style: none;
font-size: 35px;
}
li:hover .sublist-music a {
display: block;
color: black;
}
li{
background-color: white;
border-radius: 30%;
}
li:hover{
background-color: #A1CCB6;
}
.sublist-music{
display: none;
}
.sublist-podcasts{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/test.css">
<title>banana split</title>
<link href="https://fonts.googleapis.com/css2?family=Neucha&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="list">
<li> <a>Home</a></li>
<li> <a>Music</a></li>
<div class="sublist-music">
Shows
Live
</div>
<li> <a>Podcasts</a></li>
<div class="sublist-podcasts">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindfull</li>
</div>
<li> <a>Live</a></li>
<li> <a>About us</a></li>
<li> <a>Contact</a></li>
</div>
</div>
</body>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Music
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Shows
Live
</div>
</div>
Live
About us
</div>
Reference link : https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
body {
font-family: 'Neucha', cursive;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
border-radius: 30%;
background-color: white;
}
li a {
color: #000;
}
li:hover,
li:focus-within {
background-color: #A1CCB6;
cursor: pointer;
}
li:focus-within a {
outline: none;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
visibility: visible;
opacity: 1;
display: block
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>Home</li>
<li>Music
<ul class="dropdown">
<li>Shows</li>
<li>Live</li>
</ul>
</li>
<li>Podcast
<ul class="dropdown">
<li>Plants</li>
<li>Food</li>
<li>Youtubers</li>
<li>Mindful</li>
</ul>
</li>
<li>Live</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
This question already has answers here:
How can I transition width of content with width: auto?
(2 answers)
workaround for display block and css transitions not triggering
(4 answers)
Closed 5 years ago.
this is my very second question!
I also searched in the questions but nothing helps.
I have a problem with transitions. I am trying to apply a 300ms transition to the menu when the toggle button is checked on mobile view; I tried in vain with negative values in the class .menu. Now, doing so the menu slides up but I want it to slide down and nothing seems to help. I also tried with the z-index but nothing seems to work.
I really can't figure out what to do. Any help that could send me on the right direction would be greatly appreciated!
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
header {
display: block;
background-color: #FFF;
height: inherit;
}
nav {
text-align: center;
line-height: 3.5em;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: inherit;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: #ededed;
}
nav ul li a {
text-decoration: none;
color: #313131;
}
nav ul li a:hover {
color: #b9b5b5;
}
#menuToggle {
display: none;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
transition: all 300ms ease-in-out;
}
.menu-icon {
float: right;
color: #2f2f2f;
cursor: pointer;
padding-top: 0.46em;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 0.46em;
text-decoration: none;
font-size: 30px;
}
.menu {
display: none;
}
#menuToggle:checked ~ header .menu {
display: block;
top;
66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
height: inherit;
}
#menuToggle:checked ~ header .menu {
display: block;
top;
66px;
}
should be
#menuToggle:checked ~ header .menu {
display: block;
top: 66px;
}
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: absolute;
display: block;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav {
height: -66px;
width: 100%;
}
nav ul {
background-color: #FFF;
display: inline;
float: right;
padding: 0.55em 2em 0 0;
height: inherit;
}
nav ul li {
display: inline;
margin: 0.2em auto;
}
nav ul li:hover {
background-color: #FFF;
}
nav ul li a {
padding: 0 2em;
}
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>