デスクトップ上のdivを非表示にする

Question

デスクトップ上でdivを非表示にしようとしています。私はメディアのクエリを試みました（キャロラインのソリューションはここにあります：https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885）

モバイルでは私の大きなナビ（.menu）を隠してしまいましたが、デスクトップ上で私のmobilenavを隠す方法はわかりません。メインのCSSでmobilenavの表示を「非表示」に設定し、メディアクエリで「ブロック」に表示するとdivは非表示のままです。私はどこかで自分のコードに問題があると推測しています。アドバイスをいただければ幸いです。サイトここ

mobilenav { 
     display: block; 
     width: 100%; 
     z-index: 1000; 
     background-color: #000000; 
     text-align: center; 
    } 

    mobilenav div { 
     width: 100%; 
    } 

    mobilenav a { 
     color: #ffffff; 
     text-transform: uppercase; 
    } 

    mobilenav a:hover { 
     color: #ffffff; 
     text-decoration: underline; 
    } 

    mobilenav > nav > ul { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: flex-start; 
     list-style: none; 
     margin: 0; 
     padding: 0; 

    } 

    mobilenav > nav > ul:hover { 
     background-color: #000000;  
    } 

    mobilenav > nav > ul > li { 
     flex: 0 1 auto; 
     margin: 0; 
     padding: 0; 
     position: relative; 
     width: 100%; 
     transition: all linear 0.1s;  
    } 

    mobilenav > nav > ul > li a + div { 
     display: none; 
     position: absolute; 
    } 

    mobilenav > nav > ul > li:hover a + div { 
     display: block; 
     background-color: #000000; 
    } 

    mobilenav > nav > ul > li a + div > ul { 
     list-style-type: none; 
    } 

    mobilenav > nav > ul > li a + div > ul > li { 
     margin: 0; 
     padding: 0; 
    } 

    mobilenav > nav > ul > li a + div > ul > li > a { 
     display: block; 
     padding: .25rem 1.5rem; 
     text-decoration: none; 
    } 

    mobilenav > nav > ul > li > a { 
     align-items: flex-start; 
     display: flex; 
     padding: 1rem 1.5rem; 
     text-decoration: none; 
    } 

<mobilenav> 
    <nav role="navigation"> 
     <ul> 
      <li> 
       <a href=""> 
        <div>Navigation</div> 
       </a> 
       <div> 
        <ul> 
         <li><a href="">Home</a></li> 
         <li><a href="">About Us</a></li> 
         <li ><a href="">Research</a></li> 
         <li><a href="">Services</a></li> 
         <li><a href="">Ask a Librarian</a></li> 
         <li><a href="">Archives &amp; Special Collections</a></li> 
         <li><a href="">Exhibitions</a></li> 
         <li><a href="">Plant Information</a></li>     
        </ul> 
       </div> 
      </li> 
     </ul> 
    </nav> 
</mobilenav> 

です：

http://nybg.beta.libguides.com/

が

https://jsfiddle.net/eamr662L/（ウェブサイトのための完全なコード）

ここに関連するコードが何であるかを私は思うの抜粋だ：ここに私のバイオリンです

ありがとう！

---

Answer 1

は、何らかの理由であなたのmobilenavは、デスクトップ上のblockからdisplayセットを持っているようです。

@media(min-width: 601px) { 
    mobilenav { 
    display: none; 
    } 
} 

それとも、デスクトップ上のdisplay: none;にmobilenavを設定し、モバイルは、モバイル上blockにdisplayを設定するためのメディアクエリを使用します：あなたはこのようにデスクトップ用のメディアクエリーでdisplay: none;を使用することができます

mobilenav{ 
    display: none; 
} 

@media(max-width: 600px){ 
    mobilenav{ 
    display: block; 
    } 
} 

作業はJSFIDDLEです。

おそらく、デスクトップとモバイルの両方に同じメニューを用意し、メディアクエリを使用して別のスタイルにする必要があります。

また、あなたは今あなたのウェブサイトに<style></style>の間にあるように、外部ファイルにCSSを入れることをお勧めします。メディアquerysを追加

Answer 2

試してみてください。

@media (min-width: 1200px) { mobilenav {display:block;} } 
@media (min-width: 1199px) { mobilenav {display:none;} } 

Media querys example