Адаптивный центрированный логотип navbar со ссылками с обеих сторон - PullRequest
Новая
       33

Адаптивный центрированный логотип navbar со ссылками с обеих сторон

0 голосов
/ 09 сентября 2018

У меня есть навигационная панель с центрированным изображением и ссылками с обеих сторон. Я не использовал navbar-brand, а использовал тег li. Он работает нормально до тех пор, пока навигационная панель не рухнет.

Вот так на мобильных устройствах выглядит логотип, который становится частью меню:

Хорошо работает с большими экранами

Вот HTML-код: 

  <nav id="navbar" class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
        <a class="navbar-brand" href="index.html" >
        </a>
      </div>

<div class="collapse navbar-collapse  navbar-main-collapse">

  <ul class="nav navbar-nav">
    <li class="active"><a href="#intro">Home</a></li>
    <li><a href="#clienttestimonials">Testimonials</a></li>
    <li><a href="#contactus">Contact</a></li>
  <li class="navlogo"><a href="index.html"><img class="navimg" id="logo-navbar-middle" src="../images/logo.png"  alt="Logo Thing main logo"></a></li>

                <li><a id="whitetext">about</a></li>
                <li class="dropdown">
                  <a id="whitetext" href="#" class="dropdown-toggle" data-toggle="dropdown">Our Work<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="photocategory.html">Photo's</a></li>
                    <li><a href="videocategory.html">Video's</a></li>
                      <li><a href="animationcategory.html">Animation's</a></li>

                  </ul>
                </li>

              <li><a id="whitetext">FAQ's</a></li>
  <li><a id="whitetext" href="rentals.html" >Rental's</a></li>



  </ul>

    </div>
    </div>



     </nav>

Логотип должен быть на этом, когда рухнет навигационная панель:

Может кто-нибудь предложить решение этой проблемы? Можно ли использовать Javascript для добавления класса, когда ширина меньше 768 пикселей (это когда сваливается панель навигации).

Вот код CSS: 

@media (min-width:992px) {

  .navimg{


    width:225px;
  }

.navbar-custom .navbar-nav {

  width: 100%;
  text-align: center;
}
.navbar-custom .navbar-nav   > li {
    display: inline-block;
    float: none;
  }
  .navbar-custom .navbar-nav   > li > a {
      padding-left: 15px;
      padding-right: 15px;
    }


}

@media (min-width: 768px) and (max-width: 992px) {

  .navimg{


    width:160px;
  }

  .navbar-custom .navbar-nav {
  /* //  background: #ededed; */
    width: 100%;
    text-align: center;
  }
  .navbar-custom .navbar-nav   > li {
      display: inline-block;
      float: none;
    }
    .navbar-custom .navbar-nav   > li > a {
        padding-left: 10px;
        padding-right: 10px;
      }


     .navbar-custom ul.nav li a {
        font-size: 10px;

        font-weight: 700;
      }
}
...