چطور آیتم‌های منوی وردپرس را در منوی موبایل پنهان کنیم اما آن‌ها را در طرح بندی دسکتاپ نگه داریم؟
این آموزش به شما نشون میده که چطور آیتم‌های منوی وردپرس رو در منوی موبایل پنهان کنین اما در طرح بندی دسکتاپ نگهشون دارین.
ما شبیه ساز موبایل رو در inspector داخلی مرورگر کروم فعال کردیم. F12 رو فشار بدین تا inspector فعال بشه. منوی موبایل رو بررسی کنین. اون بخش رو با منو گسترش بدین:
میتونین لیست منوهای وردپرس رو مشاهده کنین. بیاین فقط با استفاده از CSS آیتم منوی About us رو در منوی تلفن همراه پنهان کنیم. منوی About us مورد سوم در لیست هست. در اصل شما باید این عدد رو در انتخاب‌گر CSS مشخص کنین:
به Appearance -> Editor برین. کد CSS زیر رو اضافه کنین و تغییرات رو ذخیره کنین:
|
1 2 3 4 |
.select-menu option:nth-child(3) { display: none !important; visibility: hidden !important; } |
در این کد، 3 شماره آیتم در لیست هست. شما باید اون رو با شماره مناسب جایگزین کنین. برای مخفی کردن چندین منوی وردپرس، باید همون کد رو اضافه کنین و شماره اون رو در قسمت option:nth-child(3) تغییر بدین:
کش مرورگر، کوکی‌ها رو پاک کنین و سایتتون رو بررسی کنین. میبینین که آیتم منوی About us پنهان شده. اسکرین شات، کدی رو نشون میده که منوی About us رو پنهان میکنه:
میتونین ببیین که منوی About us همچنان در طرح بندی دسکتاپ ظاهر میشه:
