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

Dropdown menu in custom navigation bar

I'm using a nav bar for my website which I got from an online template. I made some necessary changes in code and made it suitable for my project. But I'm unable to add a drop down menu. How can I add dropdown menu in the main menu.
Here is the code
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="post.css"/>
</head>
<body>
<div id="main">
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li>Home</li>
<li><a ref="#">Projects</a></li>
<li>Publications</li>
<li><a ref="#">News</a></li>
<li><a ref="#">Members</a></li>
<li><a ref="#">Gallery</a></li>
<li><a ref="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
I followed many online tutorials. But I couldn't display drop down sub menu arrow for above main menu.

CSS:
html{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
nav{
margin-top:15px
}
nav ul{
list-style:none;
position:relative;
float:left;
margin:0;
max-width:700px;
width:100%;
background: #5A5A5A url(tab.png) no-repeat 0 0;
height:50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
nav ul a{
display:block;
color: #fff;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
padding:10px;
border-radius:5px;
align-self:center;
}
nav ul li{
position:relative;
float:left;
margin:0;
padding:0;
}
nav ul li.current-menu-item{
background: gray;
}
nav ul li a:hover{
color: yellow;
cursor: pointer;
}
nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
padding:0
}
nav ul ul li{
float:none;
width:200px;
background: #5a5a5a;
}
nav ul ul a{
line-height:120%;
padding:10px 15px
color: white !important;
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
/* standard */
body {
font-family: 'Open Sans';
font-size:15px
}
a{
text-decoration:none;
color:#fff;
}
HTML:
<nav>
<div>
<ul>
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Projects</a></li>
<li ><a href="#" >Publications</a></li>
<li ><a ref="#" >News</a></li>
<li ><a ref="#" >Members</a></li>
<li ><a ref="#" >Gallery</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li>Dropdown
<ul>
<li>Dark</li>
<li>Basic Light</li>
<li>Playful</li>
<li>Elegant</li>
</ul>
</li>
</ul>
</div>
</nav>

How to build Menu bar with bottom border / box shadow in border?

I built a menu and I did box-shadow in the top of the menu and when it hover. But I still want that the box shadow will be fixed for the floor of the menu.
HTML:
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
<li class="border"></a>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>
CSS:
body {
direction:rtl;
margin:0;
padding:0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image:url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color:#2980b9;
width:100%;
height:100px;
}
#menu{
margin:0;
padding:0;
list-style-type;
none;
}
#menu li {
display:inline;
float:right;
padding-right:60px;
}
#menu li a {
display:block;
padding-top:38px;
color:#FFFFFF;
text-decoration:none;
font-size:16px; transition: 0.3s ease-out;
box-shadow:inset 0px 4px #2980b9;
}
#menu li a:hover {
box-shadow:inset 0px 4px #FFFFFF;
}
#menu li a.active {
box-shadow:inset 0px 4px #FFFFFF;
}
#logo {
margin-left:30px;
float:left;color:#FFFFFF;
font-size:52px;
margin-top:10px;
}
.body2 {
width:1300px;
height:800px;
background-color:#2980b9;
opacity: 0.8;
margin:auto;
display:block;
margin-top:35px;
color:#FFFFFF;
direction:rtl;
}
.body2 p {
font-size:16px;
padding-right:15px;
}
Full code

you may use multiple shadow and use line-height to size the height of your links:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;
overflow:hidden;
}
#menu {
margin: 0;
padding: 0;
}
#menu li {
display: inline;/* kills the bullet*/
float: right;
padding-right: 40px;
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li> Buy
</li>
<li>Media
</li>
<li>Support
</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
https://jsfiddle.net/71q10huy/1/
you could also use flex and justify-content to keep every elements on a single line and let spacing in between elements care of themselves. https://jsfiddle.net/71q10huy/3/
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;overflow:hidden;
}
.head, #menu {
margin: 0;
padding: 0;
display:flex;
flex:1;
flex-flow:row reverse;
justify-content:space-between;
list-style-type:none;
}
#menu {
margin-left:15%
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>

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;
}

navigation on media cant get 100% width

My navigation cant get a full width on media, I tried every way and cant locate where my mistake is, so I attached you the code, please if any one have an idea how to solve this, and set the width to full width = 100%?
The HTML
<nav class="navi" id="target">
<div class="menu" id="header">
<li><a class="link-1" href="#">home</a></li>
<li><a class="link-1" href="#">second</a></li>
<li><a class="link-1" href="#">third</a></li>
<div class="logo">
<li><img alt="Brand" src="logo.png" height="40px" width="60px"><li>
</div>
</div>
<div class="handle"><p>menu</p></div>
</nav>
The CSS:
nav {
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
nav li{
display: inline;
}
nav ul{
min-height:20px;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
}
.menu {display:block;
}
.handle {display:none;}
/*media try*/
#media (max-width: 580px) {
#target{
}
nav {
width:100%;
margin-top: 0;
display:block;
max-height:0;
margin-top:-20px;
padding-top:18px;
padding-right:-20%;
}
nav li{
display:block;
padding:10px;
background:#000;
}
.navi{
background: rgba(0,0, 0, 0.9);
text-align:center;
border:0;
background:#000;
}
.navi:hover{
background-color: rgba(0,0,0, 1);
border:0;
}
.link-1 {
border:0px solid #bbb;
font-size:18px;
}
.link-1:hover {
text-decoration:underline;
border:0px solid #bbb;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
display: none;
}
.menu {display:none;
}
.handle {display:block;
color:#fff;
font-size:40px;
text-decoration:none;
text-align:right;
}
.handle:hover{
}
.handle p{
color:#fff;
cursor: pointer;
-webkit-text-stroke: 1px black;
-webkit-font-smoothing: antialiased;
}
}
I fixed the HTML.

Add box-sizing: border-box; for nav.
ul tag is missing in your html.
Also make sure to remove the default padding and margin for ul.
nav ul{ padding: 0; margin:0;}
To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.