I have this dynamic UL, and I need it to be centered in my page.
Here is my HTML:
<ul id="nav">
<li><div class="tabquad">First</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
<li><div class="tabquad">Second</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Four</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Five</div></a></li>
</ul>
</li>
<li><div class="tabquad">Third</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
</ul>
My CSS:
.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -999em;
}
.item{
color:#0E4063;
text-decoration:none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
My JS:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
How do I center the whole thing?
Here you can find a test on jsfiddle
EDIT: I need 3 columns, all centered in my page.
Add this after your first #nav definition:
#nav {
width: 45em;
margin: 0 auto;
}
http://jsfiddle.net/GeraldS/ZGLtn/2/
If you don't want to give fixed width to the ul then add a outer div to ul and give text-align:center to the outer div
HTML
<div class="wrap">
ul goes here
</div>
CSS
.wrap{text-align:center}
DEMO
Use marginLeft and marginRight 'auto' with a width for the UL tag so that the left and right margin is automatically taken. For instance,
ul{
width: 300px;
margin: 0 auto; /* This center aligns the ul horizontally */
}
#nav {
width: 45em;
margin: 0px auto;
padding: 0px;
list-style: none;
}
Related
I have five different "ul" width nested "ul" "li",
I want to open current "ul" and its nested "ul" "li."
Below image will give you an idea of exactly what I want.
This is my script....
<script>
$(function() {
$('li.parent').on('click', function () {
var $menuItem = $(this),
$submenuWrapper = $('> .wrapper1', $menuItem);
var menuItemPos = $menuItem.position();
$submenuWrapper.css({
top: menuItemPos.top,
left: menuItemPos.left + Math.round($menuItem.outerWidth() * 1.1)
});
$('.wrapper1 .wrapper1').hide()
$(this).find('.wrapper1 ').show();
$(this).find('li').css({ 'visibility': 'visible', 'height': '22px' });
});
$(".wrapper1:first-child").click(function () {
$(this).next(" .wrapper1:first-child").click();
$(this).find('li:first-child').css({ 'visibility': 'visible', 'height': '22px' });
});
});
</script>
css file...
.wrapper1 {
position: relative;
}
.wrapper1 >li:first-child
{
diaplay:block;
height:25px;
}
.wrapper1 ul {
width: 200px;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
left: -1px;
top: 23px;
background: #fff;
border: 1px solid #b1bbc4;
width: 220px;
height: auto;
z-index: 300;
}
.wrapper1 li {
position: static;
width:100%;
}
.wrapper1 li a{
color:#000;
display: block;
height: 25px;
line-height: 26px;
color: #000;
text-decoration: none;
background: url(../ImagesNew/leftpanel/folder.png) no-repeat 5px;
padding-left: 28px;
}
li .wrapper1 {
position: absolute;
z-index: 10;
display: none;
}
.wrapper1 li ul {
margin: 0;
}
li .wrapper1 li {
background:#fff;
}
li .wrapper1 li a{
background: url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li .wrapper1 li a:hover{
background: #cfd8dc url(../ImagesMonoBlue/general/i-survey.gif) no-repeat 2px 6px;
}
Html code.....
<!--first portion of ul-->
<div class="wrapper1">
<ul>
<li>Select survey--</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper1">
<ul>
<li>Jkl</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
</ul>
</div>
<!--first portion of ul ends here-->
<!--second portion of ul-->
<div class="wrapper1">
<ul>
<li>Select survey--</li>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li class="parent">Mno >
<div class="wrapper1">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Xyz</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
<li class="parent">Abc >
<div class="wrapper1">
<ul>
<li>Abc</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
</li>
<li>Def</li>
<li>Ghi</li>
<li>Jkl</li>
<li>Mno</li>
<li>Pqr</li>
<li>Stu</li>
<li>Vw</li>
<li>Xyz</li>
</ul>
</div>
<!--second portion of ul ends here-->
The above code is just a demo and has different values. I'm using the same demo in below image code.
I have a navigation bar in my webpage, but i was not able to divide it. Some text to be on the left side and some text to be on the right side. I tried using this code from this reference: http://www.w3schools.com/css/css_navbar.asp
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Login</li>
</ul>
</ul>
But this doesn't seem to work. When i add that code in
<ul style="float:right;list-style-type:none;">
nothing happens.
Is their a better way of doing it?
Here is my list code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<li>
<a href="#contact" >Contact</a>
</li>
<li>
<a href="#services" >Join Us</a>
</li>
<li>
<a href="#about" >About</a>
</li>
<li>
<a href="#top" >Home</a>
</li>
</section>
Take a look in your case in WorkingLink
You should first correct you markup then correct your css:
here i attach all correct form:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>Contact</li>
<li>Join Us</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Home</li>
</ul>
</ul>
<div>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
you can try this one:
ul li
{
float:left;
padding:5px;
}
ul li a
{
padding:5px 10px;
color:#666666;
text-decoration:none;
font-size:18px;
background:#FFFFFF;
}
ul li a:hover
{
background:black;
color:white;
}
DEMO HERE
OR
.container
{
background:gray;
width:200px;
}
.container li
{
padding:5px 10px;
color:#666666;
background:green;
width:100%;
font-size:18px;
list-style-type:none;
}
.container li a
{
text-decoration:none;
}
.container li a:hover
{
background:red;
width:100%;
display:block;
padding:5px;
}
DEMO
I'm a student learning some really basic HTML coding and I decided to use a simple JavaScript navigation bar so that the drop down menu has some animation speed.
The navigation bar was previously working but after adding my image slider it stopped working.
Thanks for the help!
// JavaScript NavBar
$( document ).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function () {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function () {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin:0;
padding:0;
}
body{
background:url(../images/subtle_white_mini_waves.png) repeat;
font-family:Tahoma, Geneva, sans-serif;
color: white;
}
#navbar{
margin-left:-400px;
position:absolute;
left:50%;
}
#navbar a{
text-decoration:none;
}
.button{
background:url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover{
background:#e6e6e6;
}
.button a{
padding: 34px 0px;
}
#navbar ul{
text-align:center;
}
#navbar ul li{
float: left;
display: inline;
font-size:16px;
height:89px;
}
#navbar ul li:hover{
background:#E6E6E6;
}
#navbar ul li a{
display:block;
color: #444;
}
#navbar ul li ul{
position:absolute;
width: 170px;
background:#fff;
}
#navbar ul li ul li{
width: 170px;
}
#navbar ul li ul li a{
display:block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a{
background:#f7f7f7;
}
#navbar ul li ul.fallback{
display:none;
}
#navbar ul li:hover ul.fallback{
display:block;
}
.shadows{
position:absolute;
z-index:10;
}
#shadowtopleft{
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowtopright{
float:left;
}
#shadowbottomleft{
margin-top: 83px;
margin-left:4.6875%;
margin-right:140px;
float:left;
}
#shadowbottomright{
margin-top: 83px;
float:left;
}
.banner {
z-index:-1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display:block;
float:left;
padding: 0px;
margin: 0px;
min-height:500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation</li>
<li>Family Strengthening</li>
<li>Community Integration</li>
<li>Support Programmes</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate</li>
<li>Volunteer</li>
<li>Sponsor</li>
<li>Partner</li>
<li>Join The Staff</li>
</ul>
</li>
<li>
<div id="logo">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board</li>
<li>News and Views</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
<li><img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg"></li>
</ul>
</div>
<script>
$( document ).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
Since you are a student, you might have not of heard of the z-index style property. The z-index property specifies the stack order of an element, especially if you are using position: absolute; a lot.
So your menu menu, #navbar, is there. It's just hidden under other elements, so you might want to add the z-index style to your code, like this:
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
I also thought that I'd mention that in your CSS code, you made a tiny error:
.banner ui{
list-style:none;
padding: 0px;
margin: 0px;
}
Should be:
.banner ul {
list-style:none;
padding: 0px;
margin: 0px;
}
I combined my answer and put it inside if the code snippet below.
// JavaScript NavBar
$(document).ready(function() {
$('#navbar ul li ul').hide().removeClass('fallback');
$('#navbar ul li').mouseenter(function() {
$('#navbar ul', this).stop().slideDown(500);
});
$('#navbar ul li').mouseleave(function() {
$('#navbar ul', this).stop().slideUp(100);
});
});
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/subtle_white_mini_waves.png) repeat;
font-family: Tahoma, Geneva, sans-serif;
color: white;
}
#navbar {
margin-left: -400px;
position: absolute;
left: 50%;
z-index: 100;
}
#navbar a {
text-decoration: none;
}
.button {
background: url(../images/navbarbutton.png);
margin-top: 66px;
width: 170px;
}
.button:hover {
background: #e6e6e6;
}
.button a {
padding: 34px 0px;
}
#navbar ul {
text-align: center;
}
#navbar ul li {
float: left;
display: inline;
font-size: 16px;
height: 89px;
}
#navbar ul li:hover {
background: #E6E6E6;
}
#navbar ul li a {
display: block;
color: #444;
}
#navbar ul li ul {
position: absolute;
width: 170px;
background: #fff;
}
#navbar ul li ul li {
width: 170px;
}
#navbar ul li ul li a {
display: block;
padding: 15px 0px 15px 0px;
color: #444;
font-size: 14px;
}
#navbar ul li ul li:hover a {
background: #f7f7f7;
}
#navbar ul li ul.fallback {
display: none;
}
#navbar ul li:hover ul.fallback {
display: block;
}
.shadows {
position: absolute;
z-index: 10;
}
#shadowtopleft {
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowtopright {
float: left;
}
#shadowbottomleft {
margin-top: 83px;
margin-left: 4.6875%;
margin-right: 140px;
float: left;
}
#shadowbottomright {
margin-top: 83px;
float: left;
}
.banner {
z-index: -1;
position: relative;
width: 100%;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
display: block;
float: left;
padding: 0px;
margin: 0px;
min-height: 500px;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beyond - Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="scripts/NavBar.js"></script>
<script src="scripts/unslider.min.js"></script>
</head>
<body>
<!--NavBar start-->
<div id="navbar">
<ul>
<li class="button">Programmes
<ul class="fallback">
<li>Problem De-esclation
</li>
<li>Family Strengthening
</li>
<li>Community Integration
</li>
<li>Support Programmes
</li>
</ul>
</li>
<li class="button">How You Can Help
<ul class="fallback">
<li>Donate
</li>
<li>Volunteer
</li>
<li>Sponsor
</li>
<li>Partner
</li>
<li>Join The Staff
</li>
</ul>
</li>
<li>
<div id="logo">
<a href="index.html">
<img src="images/logo.png" width="140" height="225" alt="Beyond - Logo">
</a>
</div>
</li>
<li class="button">About Beyond
<ul class="fallback">
<li>Our board
</li>
<li>News and Views
</li>
</ul>
</li>
<li class="button">Contact Us
<ul class="fallback">
<li>Facilities
</li>
<li>Feedback
</li>
</ul>
</li>
</ul>
</div>
<!--NavBar end-->
<!--Shadows start-->
<div class="shadows">
<div id="shadowtopleft">
<img src="images/shadowtopleft.png" width="520" height="66">
</div>
<div id="shadowtopright">
<img src="images/shadowtopright.png" width="520" height="66">
</div>
<div id="shadowbottomleft">
<img src="images/shadowbottomleft.png" width="520" height="13">
</div>
<div id="shadowbottomright">
<img src="images/shadowbottomright.png" width="520" height="13">
</div>
</div>
<!--Shadows end-->
<!--Unslider start-->
<div class="banner">
<ul>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
<li>
<img src="http://techkaps.files.wordpress.com/2010/02/1280x720_hd_wallpaper_123_zixpkcom.jpg">
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
<!--Unslider end-->
</body>
</html>
I have a navigation bar with a drop down menu. I have a + in front of the drop down menu inside a span. I would like the the plus to toggle to - when the menu is dropped down and back to + when the menu is up(hidden). How can I do this?
my html looks like
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals</li>
<li>Dresses</li>
<li>Jumpsuits</li>
</ul>
</li>
<li>Wholesale</li>
<li>Retailers</li>
<li>Contact</li>
</ul>
</nav>
I am currently using js to drop down my menu. Can I add to my current js to achieve this. My js looks like
$(document).ready(function() {
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
});
});
here is my css
nav{
position:relative;
display:block;
width:70%;
margin:0;
padding:3px 15%;
border-top:1px solid #d0d0d0;
text-align:center;
font:15px 'OpenSans';
z-index: 999;
}
nav ul{
position:relative;
width:100%;
margin:0;
padding:0;
}
nav li{
display:inline-block;
margin:0 10px;
padding:0;
}
nav li ul li{
position:relative;
display:block;
width:150px;
margin:0;
padding:0;
}
.shopList{
position:absolute;
display:none;
width:100px;
margin:0 0 0 -50px;
padding:0;
}
nav a{
position:relative;
display:block;
width:auto;
margin:0;
padding:0;
color:#707070;
text-decoration:none;
}
One solution is to compare previous text with new:
$('.shop').click(function() {
$('.shopList').slideToggle("fast");
$("a span", this).text() == "+" ? $("a span", this).text("-") : $("a span", this).text("+");
});
nav {
position: relative;
display: block;
width: 70%;
margin: 0;
padding: 3px 15%;
border-top: 1px solid #d0d0d0;
text-align: center;
font: 15px'OpenSans';
z-index: 999;
}
nav ul {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
padding: 0;
}
nav li ul {
display: none;
}
nav li ul li {
position: relative;
display: block;
width: 150px;
margin: 0;
padding: 0;
}
.shopList {
position: absolute;
display: none;
width: 100px;
margin: 0 0 0 -50px;
padding: 0;
}
nav a {
position: relative;
display: block;
width: auto;
margin: 0;
padding: 0;
color: #707070;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li class="shop"><span>+</span>Shop
<ul class="shopList">
<li>New Arrivals
</li>
<li>Dresses
</li>
<li>Jumpsuits
</li>
</ul>
</li>
<li>Wholesale
</li>
<li>Retailers
</li>
<li>Contact
</li>
</ul>
</nav>
I'm struggling to get my logo and menu items vertically aligned in my header. Could you please hep me? (note that the header height changes when users scroll down by 100px and I'd like to keep the logo and menu vertically aligned based on the height of the header). Many thanks
http://jsfiddle.net/pPx62/
<div class="header big-height">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
<!-- end header-->
<div class="spacer"></div>
<div class="block"></div>
<div class="block"></div>
.big-height {
height: 120px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.short-height {
height: 80px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
float: right;
vertical-align: middle;
display: table;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
float:left;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
.block {
height: 800px;
background: green;
width:100%;
margin-top: 5px;
}
JS
$(function() {
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.removeClass('big-height').addClass("short-height");
} else {
header.removeClass("short-height").addClass('big-height');
}
});
});
$(document).ready(function() {
var headerHeight = $(".header").height();
$(".spacer").css({"height": headerHeight+"px"});
});
Easiest way would be to specify a line-height equal to the height:
.big-height {
height: 120px;
line-height: 120px;
...
}
.short-height {
height: 80px;
line-height: 80px;
...
}
Check this updated fiddle of yours: http://jsfiddle.net/pPx62/1/
Update:
Regarding your question about logo image, using the same markup as you already have, the easiest way would be to use vertical-align on the img and make the logo div as display:table-cell.
Check this updated fiddle: http://jsfiddle.net/pPx62/2/
HTML:
<div class="logo">
<img src="yourimagehere" />
</div>
CSS:
.logo {
display: table-cell;
vertical-align: middle;
text-align: center;
...
}
.logo > img { vertical-align: middle; }