Currently I have a header and above it I have my navbar. On my editor it is centered but when I stretch the page or view it in a different format it won't appear to be on top of the center of the header. Any ideas on what I should do?
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}
#nav li{
float:left;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Much of what I provided will not be useful to this question, and I apologize for that, but I just want to provide as much information as possible to get help. Thanks!
Hi now try to this css
#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}
Demo
#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Add these properties to your existing classes.
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
width:100%;
text-align:center;
}
#nav li{
display:inline-block;
}
This should solve your issue.
Make your nav bar take full width, and center the inner contents horizontally using text-align:center;
Related
I'm doing my project for web development and my friend was assigned to do the nav bar. But after i completed my website and pasted his nav bar codes into my codes. It clashed with my bootstrap and thus not displaying correctly. I tried searching for solutions like pasting the link ref after the bootstrap but still up to no avail.
I'll put the CSS code and HTML code here. I'm guessing the classes clashed?
<nav class="navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>
/CSS/
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
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: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.dropdown:hover .dropdown-content {
display:block;
}
.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
Just rename your class with any unique name which will not be in Bootstrap.For that you can add your website name with class or anything
<nav class="your-theme-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="your-theme-dropdown">
EVENTS
<div id="specificdays" class="your-theme-dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="your-theme-dropdown">
PROJECTS
<div class="your-theme-dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="your-theme-logo"></li>
</ul>
and change these classes in CSS also
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav{
position:sticky;
top:0;
z-index:1;
}
li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
li a, .dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
li .your-theme-dropdown {
display: inline-block;
}
.your-theme-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;
}
.your-theme-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.your-theme-dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.your-theme-dropdown:hover .your-theme-dropdown-content {
display:block;
}
.your-theme-navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.your-theme-logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
Change the name of your defined classes, for example .navbar class in your css file is already included in css file of bootstrap.
If you want use some css of bootstrap and some custom css then just write new class nearby navbar class and target all navbar css with that new class
example
*{
margin-top:0;
margin-left:0;
margin-right:0;
}
#mainpage{
width:100%;
height:650px;
}
#logo{
float:left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav.custom-navbar{
position:sticky;
top:0;
z-index:1;
}
.custom-navbar ul li {
float: right;
text-align:center;
padding-right:40px;
padding-top:10px;
display:block;
}
.custom-navbar ul li a,.custom-navbar ul li a.dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:quicksand;
margin-top:5px;
margin-right:-10px;
}
#maintopic{
letter-spacing: 4px;
font-size:13px;
}
.donation{
border:1;
border-size:1px;
letter-spacing: 4px;
font-size:13px;
border-color:#333;
border-style:solid;
cursor:pointer;
border-color:white;
padding:10px 10px 10px 10px;
}
.donation:hover{
background-color:#fff;
color:#333;
}
#maintopic:hover{
border-bottom:2px solid #fff;
}
.custom-navbar ul li .dropdown {
display: inline-block;
}
.custom-navbar ul li .dropdown .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;
}
.custom-navbar ul li .dropdown .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display:block;
text-align: left;
width:128px;
}
#specificdays a{
width:200px;
}
#specificdays a:hover{
width:190px;
}
.custom-navbar ul li .dropdown .dropdown-content a:hover {
background-color: #333;
color:#ddd ;
}
.custom-navbar ul li .dropdown:hover .dropdown-content {
display:block;
}
.custom-navbar.navbar{
padding:3px;
text-align:center;
color: black;
font-family: sans-serif;
background-color: #333;
}
.logo{
width:140px;
height:60px;
cursor: pointer;
margin-top:-25px;
margin-bottom:-10px;
}
<nav class="navbar custom-navbar">
<ul>
<li><a class="donation" border= href="#donate">DONATE</a></li>
<li class="dropdown">
EVENTS
<div id="specificdays" class="dropdown-content">
World Environment Day
World Ocean Day
World Clean Up Day
World Day to combat Desertification and Drought
</div>
</li>
<li class="dropdown">
PROJECTS
<div class="dropdown-content">
Reward System
Comic Strips & Posters
Make A Pledge
Why a Greenboy
Donate to a cause
</div>
</li>
<li><a id="maintopic" href="#about">ABOUT</a></li>
<li id="logo"><img src="eugene.png" class="logo"></li>
</ul>
</nav>
I can't put the menu horizontally anything i would do. What i am doing wrong?
I suppose that the problem is from inline option, but i am not sure.
If anyone can correct my code i would appreciate very much. Thank you.
HTML code
<nav>
<ul>
<li class = "current-item"> Home </li>
<li> Profile </li>
<li> Contact </li>
</ul>
</nav>
CSS code
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
width: 25px;
height:25px;
z-index: 2;
}
nav > ul > li {
font-size:20px;
color:white;
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
z-index: 2;
}
nav > ul > li> a {
text-decoration:none;
color:#000000;
transition:all linear 0.15s;
}
nav > ul >.current-item > a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
text-decoration:none;
}
nav> ul > li:hover> a{
background-color:rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius:10px;
border:none;
cursor: pointer;
width: 50px;
height: 28px;
z-index:2;
}
Remove the width from nav.
nav{
position:absolute;
margin-top: 288px;
margin-left: 0px;
height:25px;
z-index: 2;
}
I am building a site and I am stuck with a problem... when I hover over a li element and the submenu is displayed, I can't click anything inside it because it closes really fast.
Code added below -
<div class="col-md-9">
<ul>
<li>Home</li>
<li>Order
<ul class="submenu1" style="margin-left: -35px">
<li><center>Order Entry<hr/></center></li>
<li><center>Shipment Details<hr/></center></li>
<li><center>Accounts Department<hr/></center></li>
<li><center>Machine Installation Group<hr/></center></li>
<li><center>Commercial Group<hr/></center></li>
<li><center>Order Enquiry<hr/></center></li>
<li><center>Order Status<hr/></center></li>
</ul>
</li>
</ul>
</div>
.nav
{
height:100px;
background-color:darkslateblue;
}
.image
{
height:400px;
background-image: url('../images/image.png');
background-repeat: no-repeat;
background-size:cover;
}
.image h1
{
color:white;
margin-left:150px;
text-align: center;
font-size:25px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:150px;
}
.nav a
{
color:white;
font-family: 'Raleway', sans-serif;
font-weight:600;
font-size:12px;
text-transform:uppercase;
padding:20px;
}
.nav li
{
display:inline;
}
.nav .container
{
padding:30px;
}
.menu2
{
height:50px;
background-color: darkslateblue;
}
.info
{
height:400px;
background-color: white;
}
.info h1
{
color: darkslateblue;
text-align:center;
font-size:50px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:25px;
}
.info p
{
color: black;
font-family: 'Raleway', sans-serif;
margin: 50px;
font-size:20px;
font-weight:bold;
}
.footer
{
height:50px;
background-color:darkslateblue;
}
.footer p
{
color:white;
text-transform: uppercase;
padding:10px;
}
.setPass
{
margin-top:60px;
margin-left:500px;
}
.submenu1
{
width:200px;
height:450px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu1 ul
{
display:none;
position:absolute;
}
.submenu1 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu1
{
display:block;
position:absolute;
}
.submenu2
{
width:200px;
height:230px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu2 ul
{
display:none;
position:absolute;
}
.submenu2 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu2
{
display:block;
position:absolute;
}
.submenu3
{
width:200px;
height:300px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu3 ul
{
display:none;
position:absolute;
}
.submenu3 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu3
{
display:block;
position:absolute;
}
.submenu4
{
width:200px;
height:110px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu4 ul
{
display:none;
position:absolute;
}
.submenu4 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu4
{
display:block;
position:absolute;
}
I know that there is a gap but i'm not able to remove it.
Please help.
Thanks in advance.
You dirty code that is difficult to maintain in the future
Try to take out the styles in the css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* use reset.css or normalize.css */
}
ul{
list-style: none;
display: flex;
}
ul> li{
position: relative;
}
ul> li a{
display: block;
padding: 5px 10px;
}
.submenu{
display: none;
position: absolute; top: 100%; left: 0;
}
ul> li:hover .submenu{
display: block;
}
<ul>
<li>Home</li>
<li>Order
<ul class="submenu">
<li>Order Entry</li>
<li>Shipment Details</li>
<li>Accounts Department</li>
<li>Machine Installation Group</li>
<li>Commercial Group</li>
<li>Order Enquiry</li>
<li>Order Status</li>
</ul>
</li>
</ul>
Delete margin-top: 44px from class submenu1 and other submenus
Fiddle: https://jsfiddle.net/7mnu4Lcx/1/
I have a big problem and I can't solve it.
I have a top menu with a image on the left and a search box on the right.
I want this search box to stay in the middle, but line-height is not working there... I don't know what to do.
http://jsfiddle.net/5mdz2zp9/
body {
margin: 0;
padding: 0;
//background-color:#eee;
background-color:#F5F6FA;
font-family: 'Open Sans', sans-serif;
font-size:12px;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
#menu {
background-color: rgba(35,35,35,.9);
//border-bottom:1px solid #eee;
position:fixed;
width:100%;
top:0;
margin:0;
//padding: 0;
color: #fff;
text-align: center;
height:50px;
z-index:100;
}
#menu a:link, #menu a:visited, #menu a:hover{
color: #fff;
}
#menu ul{
display:table;
width:100%;
list-style-type: none;
}
#menu li{
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
.right{
text-align:right !important;
padding-right:10px;
}
#menu img{
margin-left:10px;
max-height:40px;
}
.search{
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
border:1px solid #fff;
border-radius:7px;
color:#555;
font-weight:bold;
}
html
<div id="menu">
<ul>
<li><img src="https://infooab.examtime.com/wp-content/themes/learn/img/flashcard_shortcode_icon.png"></li>
<li class=right><form class="searchform"><input type="text" name="search" class="search" placeholder="search"></form></li>
</ul>
</div>
How can I align input in the middle vertically without let image size on the left interfearing?
Thank you friends!
So posting as answer..
Please add this in your css and your box will be in middle..please be in mind when you are using display;table-cell then use vertical-align..hope it will help..:)
#menu li{vertical-align:middle;}
Change this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
}
to this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
height: 100%;
}
and this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
to this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
vertical-align: middle;
}
Here is the JSFiddle demo
css
#menu li {
border: 1px solid yellow;
display: table-cell;
text-align: left;
vertical-align: middle;
width: 50%;
}
working jsfiddle
I have a problem with my navigation bar. It is looking great now, but if I add a position:fixed to my css, it messes everything up. Also, if the bar can't fit horizontally on screen, the browser breaks it into two rows, so it fits, but I don't want that!
I added a bg height only so I can scroll and see if the navbar stays.
What I want is a fixed navigation bar on top of the screen, not overlapping with future content, and filling the screen horizontally.
Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700|Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<!-- A roboto font stylesheetje a google fontsban -->
</head>
<body>
<div id="nav" align="center">
<ul>
<img src="img/notify_icon.png"/>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
#charset "utf-8";
/* CSS Document */
#nav {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
Here you can see it working: http://jsfiddle.net/DzLvT/
Try this demo
<div id="nav">
<ul>
<li>HOME</li>
<li>FEATURE SET</li>
<li>WHO ARE WE</li>
<li>INDIEGOGO</li>
<li>CONTACT US</li>
</ul>
</div>
#nav{
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
bottom:auto;
background-color: #353539;
height:50px;
}
#nav ul {
margin:0 auto;
width:auto;
height:100px;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
vertical-align: middle;
line-height:50px;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
body{
background-color:#c5c5c5;
height:1500px;
}
you can also use css rules:
position:fixed; and top:0px;
on your menu tag
Try remove the #nav and iclude it on ul#nav, and add position fixed
http://jsfiddle.net/LZAhC/
#nav ul {
font-family: Century Gothic;
font-size: 16px;
color: #fff;
background-color: #353539;
height: 100px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
padding:0px;
position: fixed;
}
#nav ul li {
list-style-type: none;
text-align: center;
display:inline-block;
margin: 0px;
padding:0px 10px 0px 10px;
border-right:1px solid #DDD;
height: 10px;
vertical-align: middle;
}
#nav ul li {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: inline-block;
padding: 30px;
margin-bottom: 90px;
vertical-align: middle;
}
#nav a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
padding: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}
#nav img{
width:100px;
}
body
{
background-color:#c5c5c5;
height:1500px;
}
u must give the #nav fixed with and a width with % on the a tags . They will be resized within the width of their parent if the space is too small they will go to a new line so summ them to 97% total and leave 3% for margins and paddings. instead of positioning the text with paddings u can use Line-height for height and text-aling-center
add to ur div somethink like 800/960px width remove the overflow and see the magic :D
just replace this in ur css:
#nav ul li {
list-style-type: none;
text-align: center;
display: inline-block;
width: 19%;
margin: 0px;
/* padding: 0px 10px 0px 10px; REMOVE THE PADDING*/
border-right: 1px solid #DDD;
vertical-align: middle;
line-height: 50px; /*THE SAME AS HEIGHT BUT FOR text elements*/
}