We Keep Coding

Hambuerguer menu not working online but working in xampp/localhost

I am having a problem with a responsive menu. While I'm in my offline server, the responsive menu works fine in mobile format, but when It's in the real server, it does not work. I've been struggling with this for hours. Here is my code:
HTML
<div class="menu">
<div class="menu_bar">
<img id="logo-mobile" src="design/logo-titol-prova-1.PNG">
<span class="icon-menu"></span>
</div>
<nav>
<img id="logo" src="design/logo-titol-prova-1.PNG">
<ul>
<li class="first">About</li>
<li>Surf/Kitesurf</li>
<li>The Tour</li>
<li>Lodging</li>
<li>Testimonials</li>
<li>Reserve Now</li>
</ul>
</nav>
</div>
CSS
/*Menu*/
.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}
.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}
.menu_bar {
display:none;
}
.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}
.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}
.menu nav ul li.first {
background:none;
}
.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}
.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.menu nav ul li a:active {
color:#71e1b0;
}
section {
padding:20px;
}
img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}
#media screen and (max-width:1100px){
img#logo{
max-width:300px;
margin-left: 10px;
}
.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}
.menu nav ul li a {
margin:10px 15px 0 15px;
}
.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}
#media screen and (max-width:800px){
img#logo{
display:none;
}
.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}
.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}
.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}
.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}
.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;
}
img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}
menu.js
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
script-menu.js
$(document).ready(function(){
$("#banner").css({"height":$(window).height() + "px"});
var flag = false;
var scroll;
$(window).scroll(function(){
scroll = $(window).scrollTop();
if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});
flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}
});
});
This is the website: http://marsurftours.com/. I've tried everything and spent many hours trying to find a solution. If you know how to solve this issue, I would appreciate it. Thanks for the help!

I think you forgot to add js/ before menu.js
So instead
<script src="menu.js"></script>
Try
<script src="js/menu.js"></script>

You are trying to link a file in system storage , you need to link a url
example: www.stackoverflow.com/navigation.js

Semi-Collapsed Sidebar

I currently have a sidebar that looks like: this
This is the HTML code for it:
<div id="sidebar">
➕
<a class="active" href="#">🏠</a>
🙋‍♂️
🔧
🚪
</div>
Now I want to add a button to make the bar bigger, and also display text using below code:
Using onclick="openNav()" I have found this way:
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
If I hardcode in the text like this: ➕ New user, the text will also show when the bar is minimized, as in the first picture. But how can I only display the text if the bar is 250px?
This is my current sidebar CSS settings:
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}

Hope this helps, any questions I will be happy to answer :)
function openNav() {
// document.getElementById("sidebar").style.width = "250px";
// OR YOU CAN
document.getElementById("sidebar").classList.toggle("open");
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
text-align: center;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
letter-spacing: 1px;
}
#sidebar a span {
display: none;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
.open {
width:250px !important;
}
.open span {
display: inline !important;
}
<div id="sidebar">
➕<span> New user</span>
<a class="active" href="#">🏠<span> New user</span></a>
🙋‍♂️ <span> New user</span>
🔧<span> New user</span>
🚪<span> New user</span>
<button onclick="openNav()">Click</button>
</div>

I changed some style of #sidebar a
#sidebar a {
white-space: nowrap;
padding-left: 25px;
overflow: hidden;
transition: all 600ms ease;
}
For align the text in single line by adding white-space: nowrap;
overflow: hidden; // For hide overflow content
transition: all 600ms ease; // make animation smooth
function openNav(btn) {
btn.classList.toggle("active");
if(btn.classList.contains("active")){
btn.textContent = "x";
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}else{
btn.textContent = "☰";
document.getElementById("sidebar").style.width = "60px";
document.getElementById("main").style.marginLeft= "60px";
}
}
#main {
transition: margin-left .5s;
margin-left:60px;
transition: all 600ms ease;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#sidebar {
position: fixed;
z-index: 10;
left: 0;
top: 0;
height: 100%;
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
transition: all 600ms ease;
}
#sidebar a {
text-decoration: none;
display: block;
padding: 20px 0 20px 0px;
color: #000000;
white-space: nowrap;
padding-left: 25px;
word-spacing: 15px;
overflow: hidden;
transition: all 600ms ease;
}
#sidebar a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: black !important;
}
#sidebar a:hover, #sidebar a.active {
text-decoration: none;
background: #f5f5f5;
color: black;
}
#sidebar a.active {
background: #e6e6e6;
}
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋‍♂️ Hello
🔧 Settings
🚪 Mobile
</div>
<div id="main">
<button class="openbtn" onclick="openNav(this)">☰</button>
</div>
With My Demo :)
function openNav() {
document.getElementById("sidebar").classList.toggle("big");
}
#sidebar{
border:1px solid #ccc;
width:50px;
transition: all 600ms ease;
}
#sidebar a{
display:block;
background:#fff;
padding:15px 20px;
text-decoration:none;
white-space: nowrap;
overflow:hidden;
word-spacing: 10px;
transition: all 600ms ease;
}
#sidebar a.active{background:#e6e6e6;}
#sidebar.big{
width:200px;
}
<button onclick="openNav()">SIDEBAR</button>
<div id="sidebar">
➕ New User
<a class="active" href="#">🏠 Home</a>
🙋‍♂️ Hello
🔧 Settings
🚪 Mobile
</div>

Dynamically adjust left position of sliding menu

I have a web site that uses a sliding menu. By default is sets left to -370px. This shows only the "MENU" text on the screen (see pictures below). When a user mouses over the menu it expands to the right and allows the user to select a menu item. If the user expands one of the items to show sub items, the menu grows as necessary. The issue is when the menu slides back in to the left. I would like the menu to ONLY show "MENU" regardless of the length of the text of the menu items. It works out to only showing the right 31px of the menu.
#navigation_slideout ul li.expanding{
height: auto
}
.expanding label{
/*background-color: #AAAFAB;
border-radius: 5px;
color: white;
*/
padding: 3px;
padding-left: 25px;
}
#navigation_slideout ul li ul li a.expanding1 {
padding:0;
margin:0;
height: auto ;
}
.expanding li > ul {
left:-35px;
position:relative;
width:100%;
}
.expanding input[type=checkbox] {
display: none;
}
.expanding input[type=checkbox] ~ ul {
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
white-space:nowrap;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.expanding input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.expanding input[type=checkbox] + label:before{
transform-origin:25% 50%;
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin-left: -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
color: #AAAFAB;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
position: absolute;
margin-top: 1px;
}
.expanding input[type=checkbox]:checked + label:before {
transform: rotate(90deg);
/*margin-top: 6px;
margin-left: -25px;*/
}
#navigation_slideout {
position: fixed;
top: 85px;
left: -370px;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
}
#navigation_slideout:hover {
left: -39px;
}
#navigation_slideout ul
{
list-style: none;
}
#navigation_slideout ul li {
background: #548EBE;
width: auto;
min-width:325px;
/*height: 30px;*/
height: auto;
text-align: left;
padding-top: 5px;
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#navigation_slideout ul li a{
color: #000;
text-decoration: none;
font-weight:bold;
display: block;
background-color:#548EBE;
color:white;
}
#navigation_slideout ul li ul{
}
#navigation_slideout ul li ul li {
width:10px;
position:relative;
left:-41px;
}
#navigation_slideout ul li ul li a {
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family: helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}
#menu{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 14pt;
color:white;
font-weight:bold;
margin:0px 0px 0px 0px;
right:0px;
padding:0px 0px 0px 0px
}
#menu a{
font-size: 14pt;
color:white;
font-weight:bold;
text-decoration:none;
}
table.nospacing {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
table.nospacing th, td {
padding: 0;
}
.menu-col{max-width: 30px;}
<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" onclick="">
<table class="nospacing" style="border-style:none">
<tr>
<td style="border-style:solid">
<ul>
<li> Home</li>
<li> About</li>
<li><a href="contact/contacts.html" > Contacts</a></li> </ul>
<hr width="200px">
<ul style="position:relative">
<li class="expanding"><input class="expanding" type="checkbox" id="cb1"><label class="expanding" for="cb1">Transitioning A Subject</label>
<ul class="expanding">
<li class="expanding1"><a class="expanding1" href="#" > Overview - Transitioning a Subject</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Pick A Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Design Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Set Up Config Mgmt</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Develop Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Review Topic Area</a></li>
<li class="expanding1"><a class="expanding1" href="#" > Publish Topic Area</a></li>
</ul>
</li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb2"><label class="expanding" for="cb2">Developing the Topic Area</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb3"><label class="expanding" for="cb3">Useful HTML Techniques</label></li>
<li class="expanding"><input class="expanding" type="checkbox" id="cb4"><label class="expanding" for="cb4">Best Practice Examples</label></li>
</ul>
</td>
<td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
<p id="menu">MENU</p>
</td>
</tr>
</table>
</div>

Are you looking for something like this?
https://jsfiddle.net/DIRTY_SMITH/ru9joppk/2/
Javascript:
function width(){
var width = document.getElementById("navigation_slideout").offsetWidth;
var offsetWidth = width - (width + width - 35);
document.getElementById('navigation_slideout').style.width = width + "px";
document.getElementById('navigation_slideout').style.left = offsetWidth + "px";
}
CSS
#navigation_slideout:hover {
left: -39px !important;
}

DIV not working with different resolutions

This might have been answered before, my searching hasn't led me to any answers, so I apologize in advance if there's already a thread that might be able to help.
Here's a fiddle
I realize that what the page looks wonky, it looks much better from my own PC. I'm really just having trouble with the navbar not centering on the slideshow when it comes to differing resolutions.
HTML:
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li>Courses
</li>
<li>Faculty
</li>
<li>Programs and Athletics
</li>
<li>Information ▽
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a>
</li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a>
</li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a>
</li>
<li>Important Handouts
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images">
<ul>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
</ul>
</div>
<div class="ws_bullets">
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
CSS:
/* CSS Document */
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
#wowslider-container4 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
/* reset align=center */
font-size: 10px;
}
* html #wowslider-container4 {
width:960px
}
#wowslider-container4 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container4 .ws_images ul li {
width:1%;
line-height:0;
/*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container4 .ws_images {
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container4 .ws_images a {
width:100%;
display:block;
color:transparent;
}
#wowslider-container4 img {
max-width: none !important;
}
#wowslider-container4 .ws_images img {
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container4 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container4 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container4 .ws_bullets div {
position:relative;
float:left;
}
#wowslider-container4 .wsl {
display:none;
}
#wowslider-container4 sound, #wowslider-container4 object {
position:absolute;
}
#wowslider-container4 .ws_bullets {
padding: 9px;
}
#wowslider-container4 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container4 .ws_bullets a:hover {
background-position: 0 50%;
}
#wowslider-container4 .ws_bullets a.ws_selbull {
background-position: 0 100%;
}
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-2em;
z-index:60;
height: 4.5em;
width: 4.5em;
background-image: url(./arrows.png);
opacity: 0.8;
background-size: 200%;
}
#wowslider-container4 a.ws_next {
background-position: 100% 0;
right:2.1em;
}
#wowslider-container4 a.ws_prev {
left:2.1em;
background-position: 0 0;
}
#wowslider-container4 a.ws_next:hover {
opacity: 1;
}
#wowslider-container4 a.ws_prev:hover {
opacity: 1;
}
/*playpause*/
#wowslider-container4 .ws_playpause {
display:none;
width: 4.5em;
height: 4.5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2em;
margin-top: -2em;
z-index: 59;
background-size: 100%;
}
#wowslider-container4:hover .ws_playpause {
display:block;
}
#wowslider-container4 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container4 .ws_play {
background-image: url(./play.png);
}
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}
/* bottom center */
#wowslider-container4 .ws_bullets {
bottom: -26px;
left:862px;
}
#wowslider-container4 .ws_bullets div {
left:-50%;
}
#wowslider-container4 .ws-title {
position:absolute;
display:block;
bottom: 1.7em;
left: 0;
margin: 0.9em;
margin-left: 0;
margin-right: 0.9em;
padding:0.8em;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
border-radius:0.5em;
-moz-border-radius:0 1em 1em 0;
border-radius:0 1em 1em 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 0.2em #5D5D5D;
box-shadow: 0 0 0.2em #5D5D5D;
}
#wowslider-container4 .ws-title div {
padding-top:0.25em;
font-size: 1.4em;
}
#wowslider-container4 .ws-title span {
font-size: 1.8em;
}
#wowslider-container4 .ws_images ul {
animation: wsBasic 20s infinite;
-moz-animation: wsBasic 20s infinite;
-webkit-animation: wsBasic 20s infinite;
}
#keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-moz-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-webkit-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#wowslider-container4 .ws_images img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container4 .ws_effect img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wrap {
width: 100%;
/* Spans the width of the page */
height: 3.8em;
margin: 0;
/* Ensures there is no space between sides of the screen and the menu */
z-index: 99;
/* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
}
body {
width:100%;
height:100%;
}
.navbar {
height: .5em;
padding: 0;
margin-left: 40em;
margin-right: auto;
position: absolute;
/* Ensures that the menu doesn't affect other elements */
width: auto;
left: 0 top: 0px;
min-width:800px;
}
.navbar li {
height: 1.5em;
;
width: 10em;
/* Each menu item is 150px wide */
float:left;
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font:"Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: #000;
/* Text color is white */
display: block;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
Thank you!

add this to your #wrap id
#wrap { text-align: center; }
and remove your .navbar code. paste this instead
.navbar { display: inline-block; }
fiddle demo

Hy Harin
If I understood you right, it's all about centering the navigation?
then try these:
.navbar {
margin: 10px auto;
width: 800px;
}
set a fixed with of your navbar UL. then set a margin: 0 auto. that means 0 margin on top and bottom and auto margin on the left and right side = it will be centered.
this won't work correctly, if the screen width is smaler than 800px ;)

How could I make a menu dropdown on click

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.