(एचटीएमएल) जब मेरी वेबसाइट मोबाइल पर देखी जाती है तो मैं अपना नेवबार कैसे छिपाऊं?

आप अलग-अलग डिवाइस साइज में कोड दिखाने या छिपाने के लिए @media स्क्रीन की मदद से शो को हाइड कर सकते हैं।

उदाहरण:

@media screen and (max-width: 767px) {
  .hide_on_mobile {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .hide_on_mobile {
    display: block;
  }
}

हाँ आप कर सकते हैं।

ऐसा करने के लिए कई दृष्टिकोण हैं

1. डिटेक्ट डिवाइस टच करने योग्य है (उदाहरण के लिए मॉडर्निज़र जैसे टूल्स के साथ) - मैं अनुशंसा नहीं करता, क्योंकि आजकल इवेंट लैपटॉप टच डिस्प्ले के साथ प्रदान किए जाते हैं।
2. डिवाइस के व्यूपोर्ट के अनुसार - यह रही अच्छी टेबल सूची Adobe द्वारा सर्वाधिक लोकप्रिय डिवाइस व्यूपोर्ट के साथ

मुझे दूसरा तरीका पसंद है

तो समाधान CSS Media-queries

और मोबाइल पहले तकनीकें

उदाहरण (स्निपेट चलाने के बाद यह देखने के लिए कि यह डेस्कटॉप में कैसा दिखेगा, Full page बटन दबाएं)

<style>
  #navbar {
    display: none;
  }

  @media (min-width: 640px) {
    #navbar {
      background: lightblue;
      height: 60px;
    }
  }

  main {
    background: #ccc;
    min-height: 40vh;
  }
</style>

<div id="navbar"></div>
<main></main>

आप इसे सीएसएस मीडिया क्वेरी के साथ कर सकते हैं। अगर आप शुरुआत कर रहे हैं तो उस CSS मीडिया क्वेरी पर एक छोटा ट्यूटोरियल है।

मोबाइल डिवाइस के आकार के अनुसार आप नेवबार को छुपा सकते हैं।

उदाहरण:

@media only screen and (max-width: 600px) {
  .navbar{
      display:none;
  }
}