<!DOCTYPE html>
<html lang="en">
<head>
<title>De Studiehoek</title>
<LINK HREF="style/main.css" REL="stylesheet" TYPE="text/css">
<script src="/Javascript/jquery-latest.js"></script>
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>50){
$("header").removeClass("large").addClass("small");
} else{
$("header").removeClass("small").addClass("large");
}
});
</script>
</head>
<body>
<header class=“large”>
<nav id="navbar">
<ul>
<li><a href="#">Welkom</a></li>
<li><a href="#">Informatie</a></li>
<li><a href="#">Begeleiding</a></li>
<li><a href="#">Visie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav> <!--navbar-->
</header>
<section id="welkom">
<p> test tekst </p>
<p> en nog meer tekst <p>
</section>
</body>
</html>
body {
background-color: #0d1416;
}
header,nav, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
/*header*/
header {
background: #FFFFFF;
opacity: 0.9;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
header.a {
color: #969696;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1em;
}
header a.active{
color: #3d3d3d;
}
header a.hover{
color: #FF00FF;
}
/* Sizes for the bigger menu */
header.large{
top: 0;
left: 0;
height: 120px;
}
header.large ul{
float: right;
}
header.large li{
display: inline;
text-transform: uppercase;
letter-spacing: 2px;
padding-right: 10px;
text-decoration: none;
}
header.large a{
text-decoration: none;
}
/* Sizes for the smaller menu */
header.small{
top: 0;
left: 0;
height: 50px;
}
header.small ul{
float: right;
}
header.small li{
display: inline;
float: left;
text-transform: uppercase;
letter-spacing: 2px;
padding-right: 10px;
text-decoration: none;
}
header.small a{
text-decoration: none;
}
/*section welkom*/
#welkom {
float:left;
height: 1500px;
width: 100%;
position: relative;
}
I'm working on a project, but i'm stuck with a problem. My navbar had a changing size, I want the <li> to vertical-align: middle; but I don't know how to get it to work. Can someone help me out here? I tried to make it work by putting it in the <li> and I tried to place the text in a different class and than tried to make it vertical align, but neither worked.
modify your code like this
header.large{
top: 0;
left: 0;
height: 120px;
margin: 0 auto;
display: table; //imporatnt use this on your header.small also
}
#navbar{
display:table-cell;
vertical-align: middle;
}
this should work
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments