the animation dosent work for some reason ( im using normalize dont know if it have an effect + a default start )
i copied the code but it didnt work for me
its second project im rly a real beginner so any advise is welcome
thanks in advance^^
*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a ::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover::after {
width: 100%;
}
Since you put the ::after on the <a> element, you need .nav-links ul li:hover a::after, not .nav-links ul li:hover::after:
*/ html */
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
*/ css */
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: var(--primary-400);
display: block;
margin: auto;
transition: var(--transition);
}
.nav-links ul li:hover a::after {
width: 100%;
}
An example with a few modifications so that it works on this site:
body {
background: black
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img {
width: 150px;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
display: inline-block;
position: relative;
padding: 8px 12px;
}
.nav-links ul li a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.nav-links ul li a::after {
content: "";
width: 0%;
height: 2px;
background: red;
display: block;
margin: auto;
transition: width 0.5s;
}
.nav-links ul li:hover a::after {
width: 100%;
}
```
<nav>
<a href="./index.html"
><img src="./eduford_img/logo.png" alt="Uni logo"
/></a>
<div class="nav-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Course</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
Related
I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle k :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
I am having problems aligning the dropdown/submenu under parent menu. To be clear, I want my submenu to show when I hover over Services. I will post the code and also attach a photo to be clear.
Edit: I have updated the snippet! I think it is alright right now. Thank you!
body {
font-family: 'Poppins', sans-serif;
background-color: -webkit-linear-gradient(to right, #2a5298, #1e3c72);
background-color: linear-gradient(to right, #2a5298, #1e3c72);
background-color: #1e3c72;
display: flex;
flex-direction: column;
min-height: 100vh;
}
button {
font-family: 'Poppins', sans-serif;
}
header {
display: flex;
width: 100%;
margin: auto;
align-items: center;
}
nav {
flex: 1;
height: 10vh;
}
.nav-links ul {
position: absolute;
/* display: none; */
}
.nav-links li a {
color: white;
font-weight: 400;
text-decoration: none;
display: block;
padding: 15px;
font-size: 18px;
}
.nav-links li {
transition: all .6s ease-out;
border-radius: 40px;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 18px;
}
.nav-links li:hover {
background-color: white;
border-radius: 40px;
height: 60%;
display: flex;
justify-content: center;
align-items: center;
color: #1e3c72;
-webkit-transition: all .6s ease;
transition: all .6s ease;
padding: 10px 18px;
}
.nav-links li:hover a {
color: #1e3c72;
}
.nav-links img {
height: 30px;
width: 30px;
filter: invert(100%);
-webkit-filter: invert(100%);
filter: brightness(0) invert(1);
cursor: pointer;
}
.nav-links li i {
padding: 0 10px;
}
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
align-items: center;
width: 50%;
height: 100%;
margin-left: auto;
}
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html" id="active">Home</a></li>
<li><a class="nav-link" href="#">Services</a>
<ul>
<li>Quality Management</li>
<li>Project Management</li>
<li>Auditing</li>
</ul>
</li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
On limited resource of what you shared, I assume this is what you need?
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 150px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html" id="active">Home</a></li>
<li><a class="nav-link" href="#">Services</a>
<ul>
<li>Quality Management</li>
<li>Project Management</li>
<li>Auditing</li>
</ul>
</li>
</ul>
</nav>
I have been trying to create a dropdown menu which appears to be working with some success but the catch is...It presents the dropdown menu on the right side of the element instead of directly under it.
I suspect it has something to do with either position or padding but I wasn't able to figure it out.
Thanks for taking a look, I'm still new to css and it means a lot!
html
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li><a>Over ons</a>
<ul>
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
css
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
}
ul li > ul {
display: none;
flex-direction: column;
}
ul li:hover > ul {
display: flex;
flex-wrap: wrap;
}
ul li > ul li {
width: 100%;
height: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
Yes, you need to position the submenu absolutely in relation to the parent li.
html {
background: #936A4A;
}
nav {
position: absolute;
width: 100%;
top: 0;
left: 0;
background: #F5F5F5;
}
ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
ul li {
width: 25%;
position: relative;
}
ul li>ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: lightblue;
/* display: none; */
flex-direction: column;
}
ul li:hover>ul {
display: flex;
flex-wrap: wrap;
}
ul li>ul li {
width: 100%;
}
li {
display: flex;
flex: auto;
}
li a {
color: #B85750;
text-decoration: none;
}
.active {
pointer-events: none
}
<nav id="navigatie" class="nav">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li><a>Over ons</a>
<ul>
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>
Please take a look at the following solution.
html {
background: #fff;
}
.parent-container{
position: relative;
width:100%;
height: 100%;
}
nav {
background: #F5F5F5;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
li {
background: #936A4A;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
background: lightblue;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link href="app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="parent-container">
<nav role="navigation" class="nav" id="navigatie">
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li>Over ons
<ul class="dropdown">
<li>Blog</li>
<li>Contact</li>
<li>FAQ/<li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
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.
How can i center the float element that you can see in this photo? I want to bring it from the left of the web page to the middle, but keeping it at the top of the page?
Here is the code of the HTML:
<html>
<head>
<title>Batch File Generator | Home</title>
</head>
<link href="style.css" rel="stylesheet" >
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</li></a>
<li><a>Ask the developers</li></a>
</ul>
</li>
<li><a>News</a></li>
</ul>
</html>
And here is the code of the CSS:
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
For HTML Code, use this:
<div class="wrapper">
<div class="middle-content">
<ul>
<li><a>Home</a></li>
<li><a>Download</a>
<ul>
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul>
<li><a>Community forums</a></li>
<li><a>Ask the developers</a></li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</div>
</div>
For css code:
html{
height: 100%;
}
body{
background: url("background.jpg") no-repeat;
background-size: cover;
font-family: Arial;
color: white;
height: 100%;
}
.wrapper{
display: table;
width: 100%;
height: 100%;
}
.middle-content{
display: table-cell;
vertical-align:middle;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Solution with flexbox.
* {
box-sizing: border-box;
}
html,
body,
ul {
padding: 0;
margin: 0;
}
nav {
width: 100%;
background-color: darkgray;
}
li {
list-style: none;
padding: 15px;
border: thin solid lightgray;
position: relative;
background-color: white;
}
li>a {
display: inline-block;
text-decoration: none;
}
.main-menu {
display: flex;
justify-content: center;
}
.sub-menu {
display: none;
position: absolute;
left: 0px;
width: 100%;
margin-top: 15px;
}
.main-menu li:hover {
background-color: lightgreen;
}
.sub-menu li:hover {
background-color: lightblue;
}
.main-menu li:hover>.sub-menu {
display: block;
}
<nav>
<ul class="main-menu">
<li><a>Home</a></li>
<li><a>Download</a>
<ul class="sub-menu">
<li>32-bit version</li>
<li>64-bit version</li>
</ul>
</li>
<li><a>Discussion</a>
<ul class="sub-menu">
<li>Community forums</li>
<li>Ask the developers</li>
</ul>
</li>
<li><a>News</a></li>
</ul>
</nav>