Using glitch.com and trying to create a simple dropdown menu.
I have used a guide and tried to make the simplest version so that I am not missing anything. However, I just cant get the hover to work for me.
ul {
padding: 0;
margin: 0;
position: absolute;
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
height: 50px;
min-width: 120px;
line-height: 50px;
background-color: black;
text-decoration: none;
text-align: center;
display: block;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
ul li a:hover + .hidden, .hidden:hover {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<ul>
<li>HOME</li>
<li>
ABOUT
<ul id="hidden">
<li>Team</li>
<li>Project</li>
<li>News</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
Feeling pretty defeated by this with no clear idea why its not working.
I have messed around with the hover statement just to get it to work but to no avail.
Css targets ID with # and Class with period .
You have hidden as an ID so you could:
Change your css to
ul li a:hover + #hidden, #hidden:hover {
display:block;
}
or html to:
<ul class="hidden">
ul {
padding: 0;
margin: 0;
position: absolute;
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
height: 50px;
min-width: 120px;
line-height: 50px;
background-color: black;
text-decoration: none;
text-align: center;
display: block;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
ul li a:hover + #hidden, #hidden:hover {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="/script.js" defer></script>
</head>
<body>
<ul>
<li>HOME</li>
<li>
ABOUT
<ul id="hidden">
<li>Team</li>
<li>Project</li>
<li>News</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</body>
</html>
Related
How to make the navbar into a fixed or sticky position using media query? I want to make it visible when you scroll down the scroll bar of your page. I tried anything I could but I don't really get it.
Here are my examples of codes.
.navbar {
background-color: #111;
padding: 12px 16px;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
/* MEDIA QUERY */
HERE
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
You can make a navbar sticky or fixed by using the CSS position property. Set position property as "sticky" or "fixed".
See the snippet below. You can add it to any view port according to your need I have added it for larger screens.
body {
height: 800px;
background: cyan;
}
.navbar {
background-color: #111;
padding: 12px 16px;
position: sticky;
top: 0;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 2 years ago.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
a:hover {
transform: translate(50px,100px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I added the transition to my Navbar links to respond when hovered but the transition is not working . I want the links to translate when hovered and therefore I used transform: translate(50px,100px); but apparently it is not working. Don't know why
Add display: block; to the links.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
a:hover {
transform: translate(50px,100px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Edit: You can refer to this.
The solution would be to add a display property to the links
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
The transform translate property will work with block level elements like a div for example.
Your "a" element is included into a "li" element, so you would probably have to focus on transforming the "li" not the "a". In css it is always important to consider that each element(tag or box) is always included into another one. So the key is to identify which one to modify and how much space is available.
You can try something like below:
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
li:hover {
background-color: red;
transform: translate(50px,100px);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I am making a navigation bar and trying to follow https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_gray.
My navigation bar isn't working as expected. When I hover over a list object, I only see the text and its small background change colour, not the whole block. How do I make the whole block change colour?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li>Home</li>
<li>Weather</li>
<li>World Time</li>
<li>Help</li>
</ul>
<!--Navigation Bar End-->
</body>
</html>
default.css:
/*Importing Fonts*/
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li {
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}
Thanks!
Neeron.
you just need to add just a tag to navbar li.
/*Importing Fonts*/
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,900');
/*Finish Import*/
#navbar{
font-family: "Raleway SemiBold", serif;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #13006e;
display: block;
}
#navbar li a{
color: white;
display: block;
padding: 8px 16px;
text-decoration: none;
}
#navbar li a:hover{
color:white;
background-color: #008000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="default.css">
<title>My Dashboard</title>
</head>
<body>
<!--Navigation Bar-->
<ul id="navbar">
<li>Home</li>
<li>Weather</li>
<li>World Time</li>
<li>Help</li>
</ul>
<!--Navigation Bar End-->
</body>
</html>
How do I move the little arrow image which is inside <li>?
Here is the code:
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
If I just add margin-top to the img element it moves all the ul down. That's not what I want. I want to move it a little bit down to align with the li items
vertical-align: middle; Might be what you need.
body {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: #f1f1f1;
padding: 5px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav ul li a img {
max-width: 20px;
height: auto;
margin-left: 4px;
vertical-align: middle;
}
nav ul li a {
color: #636363;
padding: 10px;
text-decoration: none;
}
nav ul li a:hover {
color: #333;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Haircut</title>
</head>
<body>
<header>
<nav>
<ul>
<li>News
</li>
<li>Delivery
</li>
<li>Destinations<img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png">
</li>
<li>Guaranties
</li>
<li>Contacts
</li>
</ul>
</nav>
</header>
</body>
</html>
You can set the image as position absolute.
nav ul li a img {
position:absolute;
max-width: 20px;
height: auto;
margin-left: 4px;
}
Then you can position it using the top property, not beautiful but works
http://jsbin.com/goyozo/edit?html,css