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?

Solution

I can see two issues here since you are not specifying what exactly you want fixed.

The logo is too big for an xs screen and the divider overlays the logo when you open the burger menu. I noticed you are using an image for a logo hence you don't really need to use the navbar-brand since that class adds unnecessary css for text based logos, you can simply use pull-left class.

  <a class="pull-left" href="/"><img src="/img/logo.png"></a>

The other one is the font-size is too large and hence pushes the list of links to the next line when on smaller devices. You can use "media queries" to detect when a user is on a smaller device and adjust the font-size accordingly and I have used the css solution from this answer to fix your issue.

I have made a pen to help you visualise everything mentioned above. Hope it helps. http://codepen.io/anon/pen/PqEmgP