2

I am new to bootstrap and web development.

I wanted to build one webpage which has two navbars and depending on the screen size, only one navbar will be displayed. For screen size>768px everything is working fine (at least it seems). For lower resolution, the dropdown menu is pushing the navbar down over the content.

How to avoid this? Any kind of help would be appreciated. Thanks in advance.

Click this link for the jsfiddle https://jsfiddle.net/pavan39/rk6m3ho8/2/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#header
{
  position: relative;
  z-index: 1010;
}
/* nav styling*/
.navbar-default{

  border-bottom: 0.5px solid rgb(180,180,180);
}
.navbar-brand{
  font-family:Comic Sans MS;
  color:rgb(0,50,150);
  font-size:150%;
  font-weight:italic;
}
/*end*/

/*desktop bar related*/
@media(max-width:767px)
{
  .desktop-bar{
    /*margin: 10px 10px 10px 10px;*/
    display:none;}

}
.mob-nav{
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-flex-wrap: nowrap; 
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}
.mob-home{
  -webkit-order: 1; /* Safari */
  order: 1;
  -webkit-flex-grow: 1; /* Safari */
  flex-grow: 1;
  margin-left:-1em;
}
.mob-search{
  /*width:50%;
  margin-top:0.2em;*/
  margin-top:0.5em;
  -webkit-order: 2; /* Safari */
  order: 2;
  -webkit-flex-grow: 2; /* Safari */
  flex-grow: 2;
  min-width:6em;
  size:50%
}
.mob-notify{
  -webkit-order: 3; /* Safari */
  order: 3;
  -webkit-flex-grow: 1; /* Safari */
  flex-grow: 1;
  min-width:5em;
}
.mob-more{
  /*width:7em;*/
  -webkit-order: 4; /* Safari */
  order:4;
  -webkit-flex-grow: 2; /* Safari */
  flex-grow: 2;
  min-width:7em;
}

@media(min-width:768px)
{
  .mobile-bar{
    /*margin: 10px 10px 10px 10px;*/
    display:none;} 
}
/*end*/

.wrapper{
  padding-top:50px;
}
.badge-danger {
  background-color: #d43f3a;

}

.badge-mob-notify{
  margin-left:-0.5em;
  margin-top:-0.5em;
}
<div id="header">
  <div class = "desktop-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class = "navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <ul class="nav navbar-nav navbar-left" role="navigation">
          <li role="presentation" class="dropdown">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-plus fa-lg "></i>&nbsp; <span >Add</span><span class=" caret"></span>
            </a>
            <ul class= "dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">4</a></li>
            </ul>
          </li>
          <li role="presentation">
            <form class= "desktop-search navbar-form navbar-left"  role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
              </div>
            </form>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right" role="navigation">
          <li role="presentation"><a  href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li>
          <li role="presentation"><a  href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
          <li role="presentation" class= " dropdown">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup></span><span class="caret"></span>
            </a>
            <ul class= "dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  
  <div class = "mobile-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <ul class="mob-nav nav navbar-nav" role="navigation">
          <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li>        
          <li role="presentation" class="mob-search">
            <form class=  "mob-search-bar navbar-search" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder= "" name="srch-term" id="srch-term">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </span>
              </div>
            </form>
          </li>
          <li role="presentation" class="mob-notify"><a  href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
          <li role="presentation" class="mob-more">
            <a  class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></span><span class="caret"></span>
            </a>
            <ul class= "dropdown-menu" style="z-index:99999;">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
              <li><a href="#">Favorites</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<div class="wrapper">
  <div class ="nav">
    nav
  </div>
  <div class="article">
    artcle
  </div>
  <div class="aside">
    aside
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
joker.8
  • 153
  • 7
  • can you please explain more..? – Sagar Kodte Jun 21 '16 at 11:53
  • I made two navbars. 1. for desktops 2. for mobiles Using media quiery I hid or displayed them. Both these navbars have dropdown menus. The one which was intended to be displayed for medium/large desktops seems to be working fine. The dropdown menu which was made for mobiles, seems to cover the content area by pushing the navbar area down. Actually it is the navbar width which is getting increased. For eg, Take a look at this page's navbar. When I clicked the dropdown menu, the black bar is getting elongated vertically. I hope you understood. Thanks, – joker.8 Jun 21 '16 at 13:03
  • your mobile nav is not showing may be because some of your css – Sagar Kodte Jun 21 '16 at 13:07
  • mobile-nav is getting displayed. It is the dropdown menu in mobile-nav I have a problem with. Kindly click jsfiddle link – joker.8 Jun 21 '16 at 13:26

1 Answers1

2

CSS for Bootstrap dropdown menu, which is not collapsed on the narrow screen

Bootstrap is based on the assumption that all menu items becomes collapsed when the screen width is 767px or less. That's why dropdown menu changes its behavior. Now it opens like a part of the common collapsed menu.

So you have to redefine styles for the .navbar-nav .open .dropdown-menu class. I am using this variant:

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

Please check the result: https://jsfiddle.net/glebkema/c7thd7gh/

$(document).ready(function() {
  $('.dropdown-toggle').dropdown();
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#header {
  position: relative;
  z-index: 1010;
}

/* nav styling*/
.navbar-default {
  border-bottom: 0.5px solid rgb(180, 180, 180);
}
.navbar-brand {
  font-family: Comic Sans MS;
  color: rgb(0, 50, 150);
  font-size: 150%;
  font-weight: italic;
}

/*desktop bar related*/
@media (max-width:767px) {
  .desktop-bar {
    /*margin: 10px 10px 10px 10px;*/
    display: none;
  }
}
.mob-nav {
  margin: 0px;
  padding: 0px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-flow: row;
          flex-flow: row;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}
.mob-home {
  -webkit-order: 1;
          order: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  margin-left: -1em;
}
.mob-search {
  /*width:50%;
 margin-top:0.2em;*/
  margin-top: 0.5em;
  -webkit-order: 2;
          order: 2;
  -webkit-flex-grow: 2;
          flex-grow: 2;
  min-width: 6em;
  size: 50%
}
.mob-notify {
  -webkit-order: 3;
          order: 3;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  min-width: 5em;
}
.mob-more {
  /*width:7em;*/
  -webkit-order: 4;
          order: 4;
  -webkit-flex-grow: 2;
          flex-grow: 2;
  min-width: 7em;
}
@media(min-width:768px) {
  .mobile-bar {
    /*margin: 10px 10px 10px 10px;*/
    display: none;
  }
}
.wrapper {
  padding-top: 50px;
}
.badge-danger {
  background-color: #d43f3a;
}
.badge-mob-notify {
  margin-left: -0.5em;
  margin-top: -0.5em;
}

/* dropdown menu */
@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
<div id="header">
  <div class="desktop-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
        <ul class="nav navbar-nav navbar-left" role="navigation">
          <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-plus fa-lg "></i>&nbsp; <span>Add</span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">4</a></li>
            </ul>
          </li>
          <li role="presentation">
            <form class="desktop-search navbar-form navbar-left" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term">
                <span class="input-group-btn">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
         </span>
              </div>
            </form>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right" role="navigation">
          <li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li>
          <li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li>
          <li role="presentation" class=" dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup>
              </span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="mobile-bar">
    <nav class="navbar navbar navbar-default navbar-fixed-top">
      <div class="container">
        <ul class="mob-nav nav navbar-nav" role="navigation">
          <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li>
          <li role="presentation" class="mob-search">
            <form class="mob-search-bar navbar-search" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="" name="srch-term" id="srch-term">
                <span class="input-group-btn">
         <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </span>
              </div>
            </form>
          </li>
          <li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li>
          <li role="presentation" class="mob-more dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup>
              </span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu" style="z-index:99999;">
              <li><a href="#">Profile</a></li>
              <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li>
              <li><a href="#">Favorites</a></li>
              <li><a href="#">Feedback</a></li>
              <li><a href="#">Settings</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<div class="wrapper">
  <div class="nav">
    nav
  </div>
  <div class="article">
    artcle
  </div>
  <div class="aside">
    aside
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68