Stavm Stavm - 27 days ago 8
CSS Question

How to place a div, opened by bootstrap's Navbar

I have a bootstrap sticky navbar that contains a button, which opens a drop-down div, that contains a list of clickable links.

my Bootply(similar to jsfidlle): http://www.bootply.com/T69XCh0Vei

bootstrap sticky navbar

using CSS, I would like to position that div just under the navbar, in any reasonable screen width, including mobile.

Setting the div's position as 'relative' doesn't help me as it is contained inside the navbar which causes the navbar's height go out of scale.

code sample:

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar">
<div class="container-fluid row">
<div class="dropdown">
<button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span>NAVIGATE</span>
</button>

<div id="navbar-titles-id" class="hidden-xs">
<div class="col-md-2 col-sm-1">
<h5>Status</h5>
</div>
<div class="col-md-2 col-sm-1">
<h5>Code</h5>
</div>
</div>

<div class="visible-xs" id="navbar-xs-id">
<div class="result-title">
<h2>Status Code</h2>
</div>
</div>

<ul class="dropdown-menu" id="dropdown-menu-nav-id">
<li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0"></li>
<li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1"></li>
<li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2"></li>
<li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3"></li>
</ul>

</div>
</div>
</nav>

Answer

You can achieve the desired result with minimal change. Just add any custom class eg: dropdown-pos to <div class="dropdown"> and give the style position: static.

The problem is the position: relative style which is default applied to dropdown class. Which make the dropmenu to stick at the bottom of its parent element.

Check Working Demo Here

HTML:

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar">
  <div class="container-fluid row">
    <div class="dropdown dropdown-pos">
      <button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown">
              <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span>NAVIGATE</span>       
              </button>

      <div id="navbar-titles-id" class="hidden-xs">
        <div class="col-md-2 col-sm-1">
          <h5>Status</h5>
        </div>
        <div class="col-md-2 col-sm-1">
          <h5>Code</h5>
        </div>
      </div>

      <div class="visible-xs" id="navbar-xs-id">
        <div class="result-title">
          <h2>Status Code</h2>
        </div>
      </div>

      <ul class="dropdown-menu" id="dropdown-menu-nav-id">
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2" type="button"></li>
        <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3" type="button"></li>
      </ul>

    </div>
  </div>
</nav> 

CSS:

.dropdown-pos{
    position: static;
}