2013-04-29 2 views
0

Я хочу настроить страницу, которая скрывает строку меню, в зависимости от размера экрана. Я настроил его так, что эта панель меню должна исчезнуть, когда кто-то установит ее на размер мобильного экрана (я считаю, 480 пикселей). Однако, когда я назначаю nag для отображения: none, он вообще не будет отображаться на странице. Вот код:CSS nav bar не отображается

Вот URL: http://matthewtbrown.com/jeffandcricketquilt/liquid/index2.html

<nav class="fluid fluidList hide_mobile"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="quiltshowphotos.html">Quilt Show Photos</a></li> 
<li><a href="videotutorials.html">Video Tutorials</a></li> 
<li><a>Services</a> 
<ul> 
<li><a href="quiltphotography.html">Quilt Photography</a></li> 
<li><a href="photostofabric.html">Photos to Fabric Transfers</a></li> 
<li><a href="download.html">Downloadable Patterns</a></li> 
</ul> 
</li> 
<li><a>About Us</a> 
<ul> 
<li><a href="contactus.html">Contact Us</a></li> 
<li><a href="photocredit.html">Photo Credit</a></li> 
</ul> 
</li> 
</ul></nav> 

Вот CSS: /* Mobile Layout: 480px и ниже. */

.gridContainer { 
margin-left: auto; 
margin-right: auto; 
width: 86.45%; 
padding-left: 2.275%; 
padding-right: 2.275%; 
clear: none; 
float: none; 
background-image: url(../images/pattern2.jpg); 
background-repeat: repeat; 
min-width: 480px; 
} 
#div1 { 
} 
.zeroMargin_mobile { 
margin-left: 0; 
} 
.hide_mobile { 
display: none; 
} 

ответ

0

Поместите

.hide_mobile {дисплей: блок} в @media только экран и (мин-ширина: 769px) области, а затем положить .hide_mobile {дисплей: нет} в @media только экран и (максимальная ширина: 480 пикселей).

и дайте мне знать, если это поможет.

Смежные вопросы