جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
علی سعادت
3 سال پیش توسط علی سعادت مطرح شد
1 پاسخ

مشکل ریسپانسیو در Navbar

سلام...
من بعد طراحی یه 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;
}

ثبت پرسش جدید
علی ولی‌نژاد
تخصص : طراح گرافیک و برنامه نویس
@AliValinejad 3 سال پیش آپدیت شد
3

سلام @ali.saadat.1386.aa
منظورتونو کامل متوجه نشدم میخاید منو ها نمایش داده بشن یا یک دکمه به اصطلاح همبرگر داشته باشید؟
اگر مشکلتون دیده شدن منو ها هست ک یاداوری کنم رنگشون سفیده با پس زمینه ادغام میشن از لحاظ بصری ولی نه اگ مشکلتون چینششون هست یا ارتفاع هدر رو روی Auto و یا max-content قرار بدید و نتیجه بگیرید و یا از کلاس های Toggler (همبرگر باتن) خود بوت استرپ استفاده کنید لینکشو براتون پیوست میکنم.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام