Removing horizontal scrolling on smaller devices

Question

I am trying to make a bootstrap navbar and on smaller devices I am getting a horizontal scroll on the navbar inside Login.

You can view the issue by running the code snippet and clicking on full page and then resize the browser window.

Also when I click on Login on mobile devices, I want the contents to be fully displayed instead of giving me a vertical scroll.

I am also using overflow-x: hidden; but the scrollbar is still there. I know using overflow-x: hidden; will just hide the scrollbar but I can still be able to scroll horizontally which I don't want to happen on mobile devices.

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.container-fluid,
.no-padding {
  padding: 0;
}

.navbar {
  background: #fff;
  border: #058A9B;
  border-radius: 0;
}

.navbar-default {
  margin-bottom: 0;
}

.navbar-nav>li>.dropdown-menu {
  margin-top: 2px;
  width: 20vw;
  padding: 10px 0;
  background: #fff;
}

@media (min-width: 768px) and (min-width: 640px) and (min-width: 480px) and (min-width: 320px) {
  .navbar-nav>li>.dropdown-menu {
    width: 300px;
  }
}

.dropdown-menu .form-control {
  background-color: #fff;
  color: black;
}

.glyphicon {
  color: darkgrey;
}

.or-social {
  margin-top: 10px;
  text-align: center;
  color: white;
}

.sign-in-btn,
.social-btn {
  width: 100%;
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-header>a {
  color: #777;
  font-size: 18px;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">

  <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
    <!-- Static navbar -->
    <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">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Company Name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li>
              <a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Number</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown open">
              <a href="#" data-toggle="dropdown">Login <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <form method="post" action="">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <div class="form-group has-feedback">
                        <i class="glyphicon glyphicon-envelope form-control-feedback"></i>
                        <input type="email" class="form-control" name="email" placeholder="Email Address">
                      </div>
                    </li>
                  </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <div class="form-group has-feedback">
                        <i class="glyphicon glyphicon-lock form-control-feedback"></i>
                        <input type="password" class="form-control" name="password" placeholder="Password">
                      </div>
                    </li>
                  </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <button type="submit" class="btn btn-success sign-in-btn">
                                <i class="fa fa-sign-in" aria-hidden="true"></i> Sign In
                              </button>
                      <a class="pull-right" href="#">forgot password?</a>
                    </li>
                  </div>
                </form>
                <div class="col-md-12 col-sm-12 col-xs-12 or-social">
                  <li>
                    <p>or sign in with</p>
                  </li>
                </div>

                <li style="margin-top: 15px">

                  <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">

                      <div class="col-md-6 col-sm-12 col-xs-12">
                        <button type="button" name="button" class="btn btn-primary social-btn"><span class="fa fa-facebook"></span> Facebook</button>
                      </div>
                      <div class="col-md-6 col-sm-12 col-xs-12">
                        <button type="button" name="button" class="btn btn-danger social-btn"><span class="fa fa-google"></span> Google</button>
                      </div>

                    </div>
                  </div>

                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <!--- Static Navbar End -->
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

Answer 1

Added just a media-query for smaller devices i.e max-height:768px

@media only screen and (max-width: 768px) {
  #navbar {
    max-height: fit-content;
  }
 /* And we even need to overwrite the overflow property*/
  .navbar-collapse.in { 
    overflow-y: hidden; 
    overflow-x: hidden; 
  }

}

This way, your content will be completely visible and not scrollable. You don't even need overflow:hidden. Feel free to remove the background-color.

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.container-fluid,
.no-padding {
  padding: 0;
}

.navbar {
  background: #fff;
  border: #058A9B;
  border-radius: 0;
}

.navbar-default {
  margin-bottom: 0;
}

.navbar-nav>li>.dropdown-menu {
  margin-top: 2px;
  width: 20vw;
  padding: 10px 0;
  background: #fff;
}

.dropdown-menu .form-control {
  background-color: #fff;
  color: black;
}

.glyphicon {
  color: darkgrey;
}

.or-social {
  margin-top: 10px;
  text-align: center;
  color: white;
}

.sign-in-btn,
.social-btn {
  width: 100%;
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-header>a {
  color: #777;
  font-size: 18px;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: #fff;
}

@media only screen and (max-width: 768px) {
  #navbar {
    background-color: lightblue;
    max-height: fit-content;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">

  <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
    <!-- Static navbar -->
    <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">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
          <a class="navbar-brand" href="#">Company Name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li>
              <a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Number</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown open">
              <a href="#" data-toggle="dropdown">Login <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <form method="post" action="">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <div class="form-group has-feedback">
                        <i class="glyphicon glyphicon-envelope form-control-feedback"></i>
                        <input type="email" class="form-control" name="email" placeholder="Email Address">
                      </div>
                    </li>
                  </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <div class="form-group has-feedback">
                        <i class="glyphicon glyphicon-lock form-control-feedback"></i>
                        <input type="password" class="form-control" name="password" placeholder="Password">
                      </div>
                    </li>
                  </div>
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <li>
                      <button type="submit" class="btn btn-success sign-in-btn">
                                <i class="fa fa-sign-in" aria-hidden="true"></i> Sign In
                              </button>
                      <a class="pull-right" href="#">forgot password?</a>
                    </li>
                  </div>
                </form>
                <div class="col-md-12 col-sm-12 col-xs-12 or-social">
                  <li>
                    <p>or sign in with</p>
                  </li>
                </div>

                <li style="margin-top: 15px">

                  <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">

                      <div class="col-md-6 col-sm-12 col-xs-12">
                        <button type="button" name="button" class="btn btn-primary social-btn"><span class="fa fa-facebook"></span> Facebook</button>
                      </div>
                      <div class="col-md-6 col-sm-12 col-xs-12">
                        <button type="button" name="button" class="btn btn-danger social-btn"><span class="fa fa-google"></span> Google</button>
                      </div>

                    </div>
                  </div>

                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <!--- Static Navbar End -->
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>