طريقة اخفاء قائمة من الهيدر

ما فهمته هو أنك تريد إخفاء تلك العناصر، صحيح؟

فلما إذا لا تستخدم خاصية display وإعطاء none لها لتلك العناصر، بمعنى لو أن لديك عنصر ul يحتوي على قائمة الهيدر وعناصر القائمة هي عناصر li، فاستخدم الخاصية كالتالي لإخفائهم:

ul li {
  display: none;
}

أو تستطيع تنفيذ نفس الأمر ولكن باستخدام كلاس باسم hidden مثلاً يتم وضعه على عناصر القائمة كالتالي:

HTML

<ul>
  <li>Home</li>
  <li>About</li>
  <li class="hidden">Services</li>
  <li class="hidden">Projects</li>
  <li>Contact</li>
</ul>

ثم في CSS نقوم بإختيار الكلاس وإخفاء العناصر كالتالي:

li.hidden {
  display: none;
}

لإخفاء القائمة في الهيدر دون حذفها، يمكنك استخدام أحد الخيارات التالية:

إضافة تصنيف display:none للقائمة في CSS:

.menu {
 display: none; 
}

هذا سيخفي القائمة في الهيدر لكنها لا تزال موجودة في هيكل HTML.

إضافة تصنيف hidden للقائمة في HTML:

<ul class="menu" hidden>
 <li><a href="#">Home</a></li>
 ...
</ul> 

وضع القائمة في تصنيف CSS منفصل ثم إخفائه:

<ul class="menu menu-hide">

.menu-hide {
 display: none;
}

ثم يمكنك جعل القائمة ظاهرة عندما تحتاج إليها بتغيير display إلى block أو flex أو inline-flex.