How to Overflow Bootstrap Navbar Without Distorting Its Height?

Question

I recently use jquery-marcopolo library to use some autocomplete. It naturally extends height of navbar.

This looks ugly. I want those ol elements to overflow out of navbar without changing its height. Is there a way to do?

script.js

$(document).ready(function(){
    var searchbox = $("#searchbox");

    searchbox.marcoPolo({
        url: "/api/entries/",
        formatItem: function(data, $item) {
            return data.title;
        },
        onSelect: function(data, $item) {
            window.location = "/blog/yazi/"+data.slug;
        }
    });
});

style.css

input.mp_input {
  border: 1px solid #000000;
  font: inherit;
  font-size: 100%;
  margin: 0;
  outline: none;
  padding: 3px;
  width: 250px;
}

/* Ordered list for display results. */
ol.mp_list {
  background-color: #FFFFFF;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
  overflow: hidden;
  position: relative;
  width: inherit;
  z-index: 99999;
  list-style-type: none;
}

/* Each list item, regardless of success, error, etc. */
ol.mp_list li {
  border-bottom: 1px solid #C0C0C0;
  padding: 4px 4px 5px;
}

/* Each list item from a successful request. */
ol.mp_list li.mp_item {

}

/* Each list item that's selectable. */
ol.mp_list li.mp_selectable {
  cursor: pointer;
}

/* Currently highlighted list item. */
ol.mp_list li.mp_highlighted {
  background-color: #E0E0E0;
}

/* When a request is made that returns zero results. */
ol.mp_list li.mp_no_results {

}

/* When a request is made that doesn't meet the 'minChars' length option. */
ol.mp_list li.mp_min_chars {

}

/* When a request is made that fails during the ajax request. */
ol.mp_list li.mp_error {

}

html

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Menü</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Eray Erdin</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">Anasayfa</a></li>
        <li><a href="{% url 'blog-home' %}">Blog</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ben <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="{% url 'kimdir' %}">Hakkımda</a></li>
            <li><a href="/iletisime-gec">Mesaj Gönder</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Diğer</li>
            <li><a href="/meta">Platform Hakkında</a></li>
          </ul>
        </li>
      </ul>
      <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input id="searchbox" type="text" class="form-control" placeholder="Ara" name="srch-term" data-provide="typeahead" />
        </div>
        </form>
      </div>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Environment

jquery 2.2.3
jquery-marcopolo 1.8.1

score 1 · Answer 1 · answered Apr 09 '16 at 22:32

1

It´s hard to tell which css rules are set for the navbar but you can try to use

overflow: visible; to the navbar

and/or a fixed height

answered Apr 09 '16 at 22:32

kabaehr

1,040
11
18

Actually, that `overflow` option is already set to `visible` in Bootstrap. However, although `max-height` solves the problem in devices bigger than `sm`, this time navbar breaks in small devices since the `max-height` is fixed. This can be solved via media queries. So, I'll accept your answer as valid a while later if anyone cannot give a better solution. Thanks. :) – Eray Erdin Apr 09 '16 at 22:48
This could be because of the classes you? set for the div : `
`. if you want always the same width you could just set `col-xs-3` this will even apply for all higher levels. So you don´t have to write `class="col-xs-3 col-sm-3 col-md-3"`
– kabaehr Apr 09 '16 at 22:53
The problem is not width, it is height. – Eray Erdin Apr 09 '16 at 22:54

score 0 · Answer 2 · edited May 23 '17 at 12:07

The answer of kabaehr on this post gave me the idea to fix the max-height of .navbar. When I tried, it worked like a charm. However, it was breaking in smaller devices.

So I had an idea to use media queries of CSS. Thanks to the answer of Full Decent on another questionhttps://stackoverflow.com/a/18850777/2926992 (the default device sizes of Bootstrap 3), I managed to set max-height of .navbar without breaking in smaller devices. It is as below:

@media(min-width:768px){
    .navbar {
        overflow: visible;
        max-height: 60px;
    }
}

How to Overflow Bootstrap Navbar Without Distorting Its Height?

script.js

style.css

html

Environment

2 Answers2