samedi 27 juin 2015

How to make responsive navbar?

Here is my navbar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="/img/logo.png"></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/item1/">LONG<br>ITEM1</a></li>
        <li><a href="/item2/">LONG<br>ITEM 2</a></li>
        <li><a href="/item3/">LONG<br>ITEM 3</a></li>
        <li><a href="/item4/">LONG<br>ITEM 4</a></li>
        <li><a href="/item5/">LONG<br>ITEM 5</a></li>
      </ul>
    </div>
  </div>
</nav>

and css:

.navbar {
  min-height: 100px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 25px;
  margin-bottom: 0px;
  padding: 0px 70px;
}


.navbar-brand>img {
  height: 70px;
}

.navbar-brand {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-default {
    background: #5aa0d1;
    border-radius: 0;
    -webkit-box-shadow: none;
           -box-shadow: none;
    border: 0;
}

.navbar-default .navbar-brand {
  color: #fff14f;
}

.navbar-default .navbar-nav > li > a {
  color: #fff14f;
  line-height: 24px;
  padding-top: 28px;
}

.navbar-default .navbar-nav>li.active>a {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #ffffff;
  background-color: transparent;
}


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #ffffff;
}

It doesn't displayed well on small devices (iPad, iPhone, Android devices) - some navbar elements overlay others (see real example at vkko.ru).

What is wrong there? How should I fix that?

Aucun commentaire:

Enregistrer un commentaire