Как сделать navbar который уменьшается при уменьшение страницы?

Question

[MichaelMih]

Доброго времени суток! Как сделать navbar который будет уменьшатся при уменьшение страницы?
Вот мой код:

.nav {
    margin: 0 auto;
}


.nv-block a, .nv-block span {
    text-decoration: none;
    color: white;
}

.nv-block a:hover, .nv-block span:hover {
    background-color: rgba(0, 0, 0, 0.116) ;
    border-radius: 30px;
}

.nv-block .actives {
    background-color: rgba(0, 0, 0, 0.116) ;
    border-radius: 30px;
}

<nav class="navbar navbar-expand flex-column flex-sm-row" style="background-color: #4d77a9;">
        <div class="collapse justify-content-center navbar-collapse" id="navbarNav">
            <a class="navbar-brand" style="margin-right: 50px;" href="#">
              <img src="./images/vkbonus.png" height="60" class="d-inline-block align-text-top">
            </a>
            <ul class="nav nav-pills flex-column flex-sm-row">
              <li class="nav-item nv-block" style="margin-right: 40px;">
                <a class="nav-link flex-sm-fill text-sm-center small-font actives" aria-current="page" href="#">заработать баллы</a>
              </li>
              <li class="nav-item nv-block" style="margin-right: 40px;">
                <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">мои задания</a>
              </li>
              <li class="nav-item nv-block" style="margin-right: 40px;">
                <a class="nav-link flex-sm-fill text-sm-center small-font disable"  aria-current="page" href="#">онлайн-бот</a>
              </li>
              <li class="nav-item nv-block" style="margin-right: 40px;">
                <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">аукцион</a>
              </li>
              <li class="nav-item nv-block" style="margin-right: 40px;">
                <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">топ-100</a>
              </li>
            </ul>
            <div class="nv-block">
              <a href="#" class="nv-block small-font">
                RU</a>
              <a href="#" class="nv-block small-font">
                EN
              </a>
            </div>
            <a class="navbar-brand" style="margin-right: 50px;" href="#">
              <img src="./images/menu3.png" height="50px" class="d-inline-block ml-4 align-text-top">
            </a>
        </div>
    </nav>

Но когда уменьшаем страницу, появляется белая полоска, которая начинает пожирать navbar

Answer 1

[qqNemo]

Не решение, но хороший пример. Поменьше статики в размерах

.nav-item a { font-size:100%; }
@media (min-width: 576px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1vw!important;} .nav-link {padding: 0.5rem 0.3rem !important;}}
@media (min-width: 650px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1.25vw!important;}.nav-link {padding: 0.5rem 0.5rem !important;}}
@media (min-width: 768px) { .nav-item a {font-size:0.8rem!important;} .nav-item {margin-right: 1.5vw!important;} .nav-link {padding: 0.5rem 0.5rem !important;}}
@media (min-width: 992px) { .nav-item a {font-size:0.9rem!important;} .nav-item {margin-right: 1.75vw!important;}}
@media (min-width: 1200px) { .nav-item a {font-size:1rem!important;} .nav-item {margin-right: 2.25vw!important;}}

.nav {
    margin: 0 auto;
}


.nv-block a, .nv-block span {
    text-decoration: none;
    color: white;
}

.nv-block a:hover, .nv-block span:hover {
    background-color: rgba(0, 0, 0, 0.116) ;
    border-radius: 30px;
}

.nv-block .actives {
    background-color: rgba(0, 0, 0, 0.116) ;
    border-radius: 30px;
}

<nav class="navbar navbar-expand flex-column flex-sm-row" style="background-color: #4d77a9;">                                          
  <div class="collapse justify-content-center navbar-collapse" id="navbarNav">                                                         
    <a class="navbar-brand" style="margin-right: 50px;" href="#">                                                                      
      <img src="./images/vkbonus.png" height="60" class="d-inline-block align-text-top">                                               
    </a>                                                                                                                               
    <ul class="nav nav-pills flex-column flex-sm-row">                                                                                 
      <li class="nav-item nv-block">                                                                                                   
        <a class="nav-link flex-sm-fill text-sm-center small-font actives" aria-current="page" href="#">заработать баллы</a>           
      </li>                                                                                                                            
      <li class="nav-item nv-block">                                                                                                   
        <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">мои задания</a>                        
      </li>                                                                                                                            
      <li class="nav-item nv-block">                                                                                                   
        <a class="nav-link flex-sm-fill text-sm-center small-font disable"  aria-current="page" href="#">онлайн-бот</a>                
      </li>                                                                                                                            
      <li class="nav-item nv-block">                                                                                                   
        <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">аукцион</a>                            
      </li>                                                                                                                            
      <li class="nav-item nv-block">                                                                                                   
        <a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">топ-100</a>                            
      </li>                                                                                                                            
    </ul>                                                                                                                              
    <div class="nv-block">                                                                                                             
      <a href="#" class="nv-block small-font">                                                                                         
        RU</a>                                                                                                                         
      <a href="#" class="nv-block small-font">                                                                                         
        EN                                                                                                                             
      </a>                                                                                                                             
    </div>                                                                                                                             
    <a class="navbar-brand" style="margin-right: 50px;" href="#">                                                                      
      <img src="./images/menu3.png" height="50px" class="d-inline-block ml-4 align-text-top">                                          
    </a>                                                                                                                               
  </div>                                                                                                                               
</nav>

А белая полоска скрола появляется из-за размера ширины у родителя

Comments

[MichaelMih]

появляется не скролл, а просто белое мустое место которое начинает налезать на элементы

[qqNemo]

MichaelMih, можешь дополнить html, с данной частью этого не проявляется

[MichaelMih]

qqNemo,

<nav class="navbar navbar-expand navbar-dark" style="background-color: #4d77a9;">
        <div class="collapse justify-content-center navbar-collapse" id="navbarNav">
            <a class="navbar-brand" style="margin-right: 50px;" href="#">
              <img src="./images/vkbonus.png" height="50" class="d-inline-block align-text-top">
            </a>
            <ul class="navbar-nav">
              <li class="nav-item" style="margin-right: 40px;">
                <a class="nav-link" style="color: white;" aria-current="page" href="#"><strong>Возможности</strong></a>
              </li>
              <li class="nav-item" style="margin-left: 40px;">
                <a class="nav-link" style="color: white;" href="#"><strong>Почему это бесплатно</strong></a>
              </li>
              <li class="nav-item" style="margin-left: 40px;">
                <a class="nav-link" style="color: white;" href="#"><strong>Начать пользоваться</strong></a>
              </li>
            </ul>
        </div>
    </nav>

Допустим это, появляется полоска справа если уменьшаем размер

[qqNemo]

MichaelMih, с данной часть html-ля у меня эта проблема – не проявляется (joxi.ru/xAe3BXMtXQV1em), дополни родительским блоком или проинспектируй эту полоску)