چطوری Break Point در منوی نوبار بوت استرپ رو تغییر بدیم ؟
How to change Bootstrap navbar collapse breakpoint?
سلام من از بوت استرپ برای طراحی وب سایتم استفاده میکنم و میخوام زمانی که منوی navbar به حالت موبایل تغییر میکنه collapse نقطه شکست (breakpoint) اون رو تغییر بدم. از کلاس‌های navbar-expand-lg استفاده میکنم که منو رو تو سایزهای کوچک‌تر از lg مخفی میکنه. چطور میتونم این رفتار رو تغییر بدم تا مثلا تو سایز های md یا حتی sm این اتفاق بیفته؟
سلام برای تغییر بریک پوینت تو منوی کشویی بوت استرپ ، میتونی به جای استفاده از کلاس های پیش‌فرض مثل navbar-expand-lg، از کلاس‌های دیگه ای که برای سایز های مختلف تعریف شده استفاده کنی. مثلا اگه بخوای منوی نوبار وقتی صفحه به سایز متوسط (md) میرسه مخفی بشه و دکمه همبرگری ظاهر بشه، باید از navbar-expand-md استفاده کنی.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
تو این کد، کلاس navbar-expand-md باعث میشه که منوی نوبار تو سایزهای بزرگ تر از md نمایش داده بشه و در سایزهای کوچیک‌تر، به حالت مخفی (collapsed) تغییر کنه. به همین ترتیب، اگه بخوای منو در سایز sm مخفی بشه، از کلاس navbar-expand-sm استفاده کن.