I'm wondering why (looking to achieve a drop down menu), my nav is not aligned horizontally, I've looked for every error I know, obviously didn't find anything. Can anyone help me to find the error? Or a way which I can use to make that nav aligned? :)
body {
background: #182530;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px #000000;
background: #ffffff;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: helvetica;
font-weight: bold;
color: #000000;
}
.menu a {
transition: all linear 0.15s;
color: #000000;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #be5b70;
}
menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
}
.submenu {
width: 10%;
padding: 5px 0px;
position: absolute;
right: auto;
z-index: -1;
opacity: .0;
transition: opacity linear 0.15s;
background: #2e2728;
}
.menu li:hover .submenu {
z-index: 1;
opacity: 1;
}
.submenu li a {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div class="menu-wrap">
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="submenu">
<li>WebIdentity</li>
<li>LogoDesign</li>
<li>Branding</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How can I align my nav? Where is the error?
maybe you need
.menu > ul > li {
display: inline-block;
}
I fixed the code just by adding
nav ul li {
display:inline;
}
Here is a working fiddle
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm stuck creating a navigation bar. I dont know why the text is out of the bar? Can anyone what is the problem?
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aunty Grocery</title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
</body>
</html>
The issue is because the sub-level ul is making all the li taller. To keep the alignment to the top of the ul you need to set vertical-align: top:
nav ul li {
/* other properties... */
vertical-align: top;
}
* {
padding: 0;
margin: 0;
}
/*Menu*/
nav {
width: 100%;
height: 50px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
justify-content: space-between;
line-height: 50px;
width: 100px;
vertical-align: top;
}
nav ul li a {
text-decoration: none;
color: #000;
display: block;
font-size: 16px;
font-family: Arvo;
}
nav ul li a:hover {
background-color: #27D05F;
transition: ease 1s;
color: #fff;
}
/*Dropdownmenu*/
nav ul li ul li {
display: none;
background-color: #fff;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
}
nav ul:hover ul li {
display: block;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<nav class="w3-container w3-center w3-animate-left">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Grocery
<ul>
<li>Vegetables</li>
<li>Meats</li>
<li>Fish</li>
<li>Fruits</li>
<li>Bakery</li>
<li>Others</li>
</ul>
</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
<a class="Register" href="Register.html"><button>Sign Up</button></a>
<a class="Login" href="Login.html"><button>Sign In</button></a>
here I have two menu.my problem is I can't change the text color of vertical menu. I use 'color: red !important' in list-item class but it did't work.I think I should change '.dropbtn ,li a ' but I don't know how to change it.(I want to define 2 different color)
and it is complete code:
http://jsfiddle.net/cudn8es7/63/
* {
padding: 0;
margin: 0;
direction: rtl;
font-family: "tahoma";
}
html, body {
height: 100%;
}
u1{
list-style: none;
}
.firstmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,30,250,0.5);
font-family: "B Nazanin";
direction: rtl;
font-size: 20px;
}
.firstmenu a:hover {
background-color: aqua;
transition: all 0.5s;
}
.firstmenu li {
float: right;
}
.dropbtn ,li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
direction: rtl;
transition: all 1s;
}
li.dropdown {
display: inline-block;
}
.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 {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
transition: all 0.5s;
}
.dropdown-content a:hover {
color: white;
background-color: black;
transition: all 0.5s;
}
.dropdown:hover .dropdown-content {
display: block;
}
.menu {
width: 12%;
float: right;
direction: rtl;
text-align: center;
font-family: "B Nazanin";
margin-top: 30px;
color: red;
}
.list-item{
box-shadow:-5px 4px 3px 1px gray ;
background-color: deepskyblue;
font-size: 20px;
color: red !important;
padding: 10px;
border-radius: 10px 0px 0px 10px;
margin-bottom: 10px;
transition: transform 1s;
}
.menu li:hover{
transform: scalex(1.4);
transition: all 0.5s;
background-color: blue;
color: pink !important;
}
a:active{
color:yellow;
}
#banner{
width: 100%;
height: auto;
position: fixed;
top: 0;
z-index: -1 ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>دومین صفحه وب من</title>
</head>
<body>
<ul class="firstmenu">
<li class="dropdown">
menu
<div class="dropdown-content">
home
exprience
education
CV
contact
</div>
</li>
<li>exprience</li>
<li>education</li>
<li>CV</li>
<li>contact</li>
</ul>
<img src="https://splashingpaint.files.wordpress.com/2018/03/corella-remnants.jpg" id="banner">
<div id="wrapper">
<div class="menu">
<ul>
<li class="list-item">
exprience
</li>
<li class="list-item">
education
</li>
<li class="list-item">
CV
</li>
<li class="list-item">
contact
</li>
</ul>
</div>
</body>
</html>
Try to Add This class
#wrapper > div > ul > li > a {
color:red;
}
Try using this and no need to add !important in .menu li:hover
.menu li:hover a{
color: pink;
}
Update jsfiddle here
.menu ul li a{
color:red!important;
}
This is the solution , But ill recommend you to don't use !important , coz it is not consider as good programming practise and try to use class based sections , It will help you desiring your web page
You can just write the css for styling vertical menu anchor tags. There is no need of !important to use it over here.
.menu li a {color: red;}
why is my drop down menu not working?
attaching image with the code.
what additions do i need to add in oder to make the dropdown menu work
the output is somewhat like this
exams
java c c++
the is not drop down menu.
html code :
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
and css code
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.
--> Please update following code in your existing file
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
position: relative;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
ul.menu ul {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
top: 26px;
transition: 0.3s ease-in-out;
}
ul.menu ul li {
margin-left: 0;
margin-right: 0;
width: 100%;
}
ul.menu > li:hover ul {
visibility: visible;
opacity: 1;
}
<html>
<head>
<title> Website Design </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="nav">
<ul class="menu">
<li>Home</li>
<li>
Exams
<ul>
<li>
JAVA
</li>
<li>
C
</li>
<li>
C++
</li>
</ul>
</li>
<li>Login</li>
<li>Review</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
You have not yet added the css code to make the dropdown work. Try this css code with your html to make it work.
header{
background: rgba(0,0,100,0.5);
height: 100vh;
}
.nav{
background: rgba(0,0,0,.5);
height: 80px;
}
.menu{
float: right;
list-style: none;
margin: 20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
}
.menu li a:hover{
background: coral;
border-bottom: 1px solid coral;
transition: .4s;
}
.menu > li {
position: relative;
}
.menu > li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background: red;
width: 120px;
}
.menu > li > ul > li {
display: block;
width: 100%;
}
.menu > li:hover > ul {
display: block;
}
I have to build a website for school and I am having trouble with a div class.
I wanted a new div for blog posts but it doesn't seem to work. If you take a look at my css you see that I changed the height but the text didn't move down. I called the div class 'first' and wrote some text to see where it would end up.
body {}
/*---- website---*/
#header {
position: relative;
top: 10px;
left: 0px;
font-size: 25px;
font-family: Lucida Console;
color: white;
background-color: #98AFC7;
width: 100%;
height: 50px;
padding: 20px 0px 10px 0px;
}
/*----lost een bug op die li en ul laat verdwijnen----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu -----*/
.menu-wrap {
position: relative;
left: 120px;
top: 0px;
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.menu {
width: 1000px;
margin: 30px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #D7D7D7;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #fff;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- basis menu -----*/
.menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #70879F;
}
/*-----2e menu-----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #70879F;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #98AFC7;
}
.first {
margin: 600px 0px 0px 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<div class="first">
tekst-tekst
</div>
<div id="header">
<center><big>No strings attached</big></center>
</div>
<!--menu-->
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li class="current-item">Blog</li>
<li>
Webshop <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Gitaren</li>
<li>Electronica</li>
<li>Overig</li>
<li>Sale</li>
</ul>
</li>
<li>Contact</li>
<li>Over mij</li>
</ul>
</nav>
</div>
</body>
</html>
I am working on a web project for school, which brings me to a dead end at the moment. I am currently building a navigation bar for my pages and I am looking to nest a logo image to the inside left portion of the navbar. Any suggestions would be great!
Note: I apologize ahead of time, I could not figure out jsfiddle. Too many dang errors.
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: lightblue;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 50vh;
}
/* NAVIGATION */
nav {
width: 60%;
margin: 0 auto;
background: #d67ca8;
padding: .25px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: black;
font-weight: 800;
text-transform: uppercase;
margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* IMAGES */
#navlogo {}
<html>
<head>
<title>Title | Home</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta charset="utf-8" />
</head>
<body>
<nav class="fill">
<ul>
<li>
<img id="navlogo" src="images/logo-72x72.png"></img>
<li>Home
</li>
<li>About
</li>
<li>Downloads
</li>
<li>More
</li>
<li>Contact
</li>
</ul>
</nav>
</body>
</html>
Hello I change some HTML code which is not proper and some style to make exact
you want.
I hope this code will help you.
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: lightblue;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 50vh;
}
/* NAVIGATION */
.logo{
float: left;
max-width: 50px;
width: 100%;
height:50px;
display: inline-block;
}
.logo a{
max-width: 100%;
width: 100%;
display: block;
}
.logo a img{
max-width: 100%;
height: auto;
}
nav {
width: 60%;
margin: 0 auto;
background: #d67ca8;
padding: .25px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: black;
font-weight: 800;
text-transform: uppercase;
margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
<html>
<head>
<title>Title | Home</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta charset="utf-8" />
</head>
<body>
<nav class="fill">
<ul>
<div class="logo"><img src="images/logo-72x72.png"></div>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Not likely to fix your issue - but in the interest of teaching - you are trying to nest a series of li's inside another one - this is not correct - you need to nest a UL inside the li. - also img tags are self closing so you us /> and also you should add an ALT text to all of your image (and also size attributes..
Note that I do not recommend doing this way - but to answer your query regarding nesting - it is fine to nest a ul with li's inside an li - but not naked li's on their own.
<nav class="fill">
<ul>
<li>
<img id="navlogo" src="images/logo-72x72.png" alt ="logo" width="72" height ="72"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
<img id="navlogo" class = "brand" src="images/logo-72x72.png"></img>
add name for class eg:brand and,try this
.brand {height: 25px;}