• Как выровнять ссылки по центру?

    twentytvvo
    @twentytvvo
    <!-- Новый блок -->
      <nav id="top" class="navbar navbar-default navbar-full">
        <div class="container">
    <div>
          <div class="navbar-header">
          <div id="logo">
                                                      <a href="https://procraft.com.ua/"><img src="https://procraft.com.ua/image/catalog/main/logo_procraft.jpg" title="Procraft" alt="Procraft" /></a>
                                                </div> 
          </div>
     <ul class="nav navbar-nav">
              <li class="dropdown" id="contacts">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-mobile"></i> <span class="phone">098 187 4958 | 050 399 2808 | 093 170 5641</span> <span class="hidden-sm"> </span><i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                                                          <li class="dropdown-header keep-open">Телефоны</li>
                                                                                                      <li class="keep-open"><a target="_blank" href="tel:+380981874958"><i class="fa fa-lg fa-fw fa-phone"></i> 098 187 4958</a></li>
                                                                                                                    <li class="keep-open"><a target="_blank" href="tel:+380503992808"><i class="fa fa-lg fa-fw fa-phone"></i> 050 399 2808</a></li>
                                                                                                                    <li class="keep-open"><a target="_blank" href="tel:+380931705641"><i class="fa fa-lg fa-fw fa-phone"></i> 093 170 5641</a></li>
                                                                        </ul>
                          </li>
                      </ul>
          </div>
          <div class="collapse navbar-collapse navbar-top-collapse">
           
            <ul class="nav navbar-nav navbar-right">
                                                  <li><a target="_blank" href="all-feedback-procraft/"><i class="fa fa-fw fa-comment-o"></i> Отзывы</a></li>
                                                                                                              <li class="dropdown">
                      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa--"></i> Информация <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu dropdown-menu-left">
                                              <li><a href="garantija-i-servis-procraft/">Гарантия и сервис</a></li>
                                              <li><a href="oplata-i-dostavka-procraft/">Оплата и доставка</a></li>
                                          </ul>
                    </li>
                                                                  <li><a target="_blank" href="contacts-procraft/"><i class="fa fa-fw fa--"></i> Контакты</a></li>
                                                    <li><a target="_blank" href="statyi-procraft"><i class="fa fa-fw fa--"></i> Статьи</a></li>
                                    
                        <li class="dropdown" id="cart">
      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-loading-text="Загрузка..." role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-shopping-cart"></i><small class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><span class="fa-stack-1x">0</span></small> <span class="hidden-sm"><span id="cart-total">0 грн</span> <i class="fa fa-angle-down"></i></span></a>
      <ul class="dropdown-menu keep-open">
            <li>
                  <p class="text-center">В корзине пусто!</p>
              </li>
          </ul>
    </li>
                                  
              <li class="dropdown" id="top-links">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-bars"></i> <span class="hidden-lg hidden-md hidden-sm">Меню <i class="fa fa-angle-down"></i></span></a>
                <ul class="dropdown-menu keep-open">
                                <li>
      <form action="https://procraft.com.ua/index.php?route=common/language/language" method="post" enctype="multipart/form-data" id="form-language">
        <ul class="dropdown-menu">
          <li class="dropdown-header">Язык</li>
          <li class="hidden">
            <input type="hidden" name="code" value="" />
            <input type="hidden" name="redirect" value="https://procraft.com.ua/" />
          </li>
                <li class="active"><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('ru-ru'); $('#form-language').submit();">Русский</a></li>
                <li ><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('uk-ua'); $('#form-language').submit();">Українська</a></li>
              </ul>
      </form>
    </li>
    <li role="separator" class="divider clearfix"></li>
                                              <li class="dropdown-header">Личный кабинет</li>
                  <li><a href="https://procraft.com.ua/login/" rel="nofollow"><i class="fa fa-fw fa-sign-in"></i> Авторизация / Регистрация</a></li>
                                                                        </ul>
              </li>
              
                        <li class="dropdown visible-xs">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="collapse" data-target=".navbar-menu-collapse"><i class="fa fa-fw fa-th-large"></i> Каталог товаров <i class="fa fa-angle-down"></i></a>
              </li>
                      </ul>
          </div>
        </div>
    
      </nav>
        <!-- Новый блок -->

    nav#top .container{display:flex;flex-direction:row;}
    @media screen and (max-width:1200px){
    nav#top .container{display:flex;flex-direction:column;}
      nav#top .container div{margin:0 auto;}
    }
    Ответ написан
    8 комментариев
  • Как убрать все элементы кроме двух?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    3 варианта.
    1)Сделать утилитарный класс, скажем .no-mobile
    Добавить его всем элементам, которые должны скрываться на мобильном.
    И создать соответствующее правило в css media.
    media (max-width: 992px) {
      .no-mobile {
        display: none;
      }
    }


    2) Или скрывать в медиазапросе только те элементы, что нужно, по их уникальному классу или id.

    3)Или с помощью псевдоселектора :not
    media (max-width: 992px) {
      .nav.navbar-nav.navbar-right li:not(#cart):not(#search) {
        display: none;
      }
    }


    Вы же скрыли весь navbar-right, но Вам это как оказывается не нужно. Зачем тогда Вы его целиком скрыли?

    P.s. А ещё Вы нарушили правило использования ресурса из третьего раздела. Не пихать код в вопросе картинками.
    Ответ написан
    Комментировать