سلام...
من بعد طراحی یه navbar با bootstap 4 به یه مشکل خوردم که به اینصورت بود که navabr بعد از کوچک شدن صفحه به عرض 500px تمام عرض صفحه رو پوشش نمیده....
کد هام رو میذارم لطفا اگه کسی میتونه کمک کنه...
کد های html
<nav class="navbar navbar-expand-lg navbar-light fixed d-flex justify-content-between" style="width: 100%;">
<a class="navbar-brand" href="#"> <span class="grad">GRAD</span> <span class="SCHOOL">SCHOOL</span> </a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation" style="border: 0;">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse d-lg-none" id="collapsibleNavId" style="display: inline-block !important;">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a href="#">EXTERNAL</a>
</li>
<li class="nav-item">
<a href="#">CONTACT</a>
</li>
<li class="nav-item">
<a href="#">COURSES</a>
</li>
<li class="nav-item dropdown">
<a href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a href="#">Home</a>
</li>
</ul>
</div>
</nav>
کد های css
body{
font-family: "poppins";
scroll-behavior: smooth;
text-transform: uppercase;
font-size: 16px;
}
nav[class*=navbar]{
height: 80px;
background: rgba(22,34,57,0.95);
width: 100%;
}
.grad{
color: #f5a425;
font-size: 2rem;
font-weight: bold;
}
.SCHOOL{
color: #fff;
font-size: 2rem;
font-weight: bold;
}
a[class*=brand]{
margin-left: 2.5%;
}
li.nav-item a{
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 10px 15px;
margin: 11px;
font-size: 0.85rem;
}
li.nav-item a:hover{
border: 2px solid #f5a425;
transition: all .1s;
}
.active{
border: 2px solid #f5a425;
}
ul[class*=nav]{
display: flex;
flex-direction: row-reverse !important;
}
div[class*=collapse]{
display: inline-block!important;
}
i[class="fa fa-bars"]{
font-size: 2rem;
color: #fff;
border: 0;
}
سلام @ali.saadat.1386.aa
منظورتونو کامل متوجه نشدم میخاید منو ها نمایش داده بشن یا یک دکمه به اصطلاح همبرگر داشته باشید؟
اگر مشکلتون دیده شدن منو ها هست ک یاداوری کنم رنگشون سفیده با پس زمینه ادغام میشن از لحاظ بصری ولی نه اگ مشکلتون چینششون هست یا ارتفاع هدر رو روی Auto و یا max-content قرار بدید و نتیجه بگیرید و یا از کلاس های Toggler (همبرگر باتن) خود بوت استرپ استفاده کنید لینکشو براتون پیوست میکنم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟