Мобильный верхний вопрос навигации

Question

мой сайт http://www.kaniamea.com/ph/. Пожалуйста, уменьшите экран или просмотрите эту страницу с помощью мобильного устройства. Затем, когда вы нажимаете на верхнюю правую сторону, где значок меню загорается, загорается, когда появляется меню перетаскивания (что приводит к скрытию всего заголовка). Есть ли способ предотвратить это, поэтому, когда вы нажимаете на значок меню, появится меню, не закрывая заголовок сверху? спасибо и Рождеству всем!

<!-- Start Main --> 
<div id="main"> 
    <!-- Start Header --> 
    <div id="header"> 
    <!-- Start Logo --> 
    <div id="logo"> 
     <h1><a href="#">Logo</a></h1> 
    </div> 
    <!-- End Logo --> 
    <!-- Start Nav --> 
    <div id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation" >Hide navigation</a> 
     <ul class="clearfix"> 
     <li class="home"><a href="link.html">Home</a></li> 
     <li><a href="link.html">What Happened</a></li> 
     <li><a href="link.html">Today</a></li> 
     <li> <a href="javascript:void(0);" aria-haspopup="true"><span>Visit</span></a> 
      <ul> 
      <li> <a href="link.html">Tours</a></li> 
      <li> <a href="link.html">Directions</a></li> 
      <li><a href="link.html">Operating Hours</a></li> 
      <li><a href="link.html">Things To Do</a></li> 
      <li><a href="link.html">Before You Come</a></li> 
      </ul> 
     </li> 
     <li> <a href="javascript:void(0);" aria-haspopup="true"><span>Battleships</span></a> 
      <ul> 
      <li> <a href="link.html">Arizona</a></li> 
      <li><a href="link.html">Oklahoma</a></li> 
      <li><a href="link.html">West Virginia</a></li> 
      <li><a href="link.html">California</a></li> 
      <li><a href="link.html">Nevada</a></li> 
      <li><a href="link.html">Pennsylvania</a></li> 
      <li><a href="link.html">Maryland</a></li> 
      <li><a href="link.html">Missouri</a></li> 
      <li><a href="link.html">Tennessee</a></li> 
      <li><a href="link.html">Utah</a></li> 
      </ul> 
     </li>  
     </ul> 
    </div> 
    <!-- End Nav --> 
    </div> 
    <!-- End Header --> 

Nav КСС:

#nav { 
    display: block; 
    background-image: url("images/nav-bg.png"); 
    background-repeat: no-repeat; 
    width: 681px; 
    height: 63px; 
    float: right; 
    margin-right: -1.77em; 
    margin-top: 1.6em; 
} 
#nav > a { 
    display: none; 
} 
#nav li { 
    position: relative; 
} 
#nav li a { 
    padding: 20px 25px 20px 25px; 
    color: #FFF; 
    font-size: 1.1em !important; 
    text-decoration: none; 
    font-weight: bold; 
    display:block; 
} 
#nav li a:hover { 
    background-image:url(images/hover.png); 
    background-repeat: repeat-x; 
} 
#nav span:after { 
    width: 0; 
    height: 0; 
    border: 0.313em solid transparent; /* 5 */ 
    border-bottom: none; 
    border-top-color: #F81302; 
    content: ''; 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    right: -0.313em; /* 5 */ 
} 
/* first level */ 

#nav > ul > li { 
    float: left; 
    z-index:1000; 
    overflow:visible; 
} 
#nav > ul > li > a { 
    height: 100%; 
    font-size: 1.1em; /* 24 */ 
} 
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a { 
background-image:url(images/hover.png); 
background-repeat: repeat-x; 
} 
/* second level */ 

#nav li ul { 
    background-color: #BE0115; 
    display: none; 
    position: absolute; 
    top: 100%; 
    width:170px; 
} 
#nav li:hover ul { 
    display: block; 
    left: 0; 
    right: 0; 
} 
#nav li:not(:first-child):hover ul { 
left: -1px; 
} 
#nav li ul a { 
    font-size: 1.25em; /* 20 */ 
    border-top: 1px solid #D90018; 
    padding: 0.75em; /* 15 (20) */ 
} 
#nav li ul li a:hover, #nav li ul:not(:hover) li.active a { 
background-image:url(images/drop-nav-bg.png); 
background-repeat: repeat-x; 
} 

@media only screen and (max-width: 800px) { 
html { 
font-size: 75%; /* 12 */ 
} 
#nav { 
width: 100%; 
position: static; 
margin: 0; 
top: auto; 
left: auto; 
background-image: none; 
float: right; 
height:auto; 
} 

#nav > a { 
width: 40px; 
height: 40px; 
text-align: left; 
text-indent: -9999px; 
background: url("images/menu-icon.png") repeat scroll center center #4C8FEC; 
float: right; 
margin-top: -45px !important; 
} 
#nav > a:before, #nav > a:after { 
margin-right:40px; 
margin-top:10px; 
content: ''; 
} 
#nav > a:after { 
margin-top:10px; 
} 
#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type { 
display:block; 


} 
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a { 
background-image:none; 
} 

/* first level */ 

#nav > ul { 
height: auto; 
display: none; 
left: 0; 
right: 0; 
height: 3.75em; 
width: 200px; 
float:right; 

} 
#nav:target > ul { 
display: block; 
} 
#nav > ul > li { 
width: 100%; 
float: right; 

} 
#nav > ul > li > a { 
height: auto; 
text-align: left; 
padding: 0 0.833em; /* 20 (24) */ 
height: 100%; 
font-size: 1.1em; /* 24 */ 
line-height: 2.5em; /* 60 (24) */ 
background-color: #BE0115; 
} 
#nav > ul > li > a:hover { 
background-image:url(images/drop-nav-bg.png); 
background-repeat: repeat-x; 
} 
#nav > ul > li:not(:last-child) > a { 
border-right: none; 
} 
#nav > ul > li:not(:last-child) > a { 
border-right: medium none; 
border-bottom: 1px solid #D90018; 
} 

/* second level */ 

#nav li ul { 
padding-top: 0; 
width: 200px; 
position: static; 
} 
} 

Answer 1

Проблема вы видите стебли с помощью #nav:target, чтобы сделать навигацию. Вы рассказываете браузер «Показывать только меню, когда бар URL является http://www.kaniamea.com/ph/#nav ... Применяя #nav, вы также сообщая браузеру, чтобы перейти к элементу с id="nav".

Вместо того, чтобы ваш CSS полагаться на :target, вы можете вместо этого сделать #nav.showNav и добавить событие щелчка, который переключает класс showNav.

$(function() { 
    $('.toggle-nav').click(function(event){ 
     event.preventDefault(); 
     $('#nav').toggleClass('showNav'); 
    }); 
}); 

что здесь важно, что вы звоните event.preventDefault();, который предотвращает поведение по умолчанию щелчок при нажатии на ссылку.

Вот ваш сайт с примером jquery здесь: http://jsfiddle.net/zc6w276o/