title: During mobile view, my login drop down within Navbar is jerky and looks weird
body: <p>I'm a novice, so please excuse me.</p>
  
  <p>I am making a site for work, and using bootstrap. I have a login drop down in the navbar. It looks fine on desktop view, but when scaled way down for mobile view, the once you click the login button or drop down it gets jerky and then the navbar gray bar extends down and just looks all screwed up.  HELP!</p>
  
  <p>Here's links.</p>
  
  <p><a href="https://web.gettips.com/redesign7/index.html" rel="nofollow noreferrer">https://web.gettips.com/redesign7/index.html</a></p>
  
  <p><a href="https://web.gettips.com/redesign7/css/styles.css" rel="nofollow noreferrer">https://web.gettips.com/redesign7/css/styles.css</a></p>
  
  <p>Below is the code for the media queries:</p>
  
  <pre><code>@charset "UTF-8";
  /* CSS Document */
  
  @media (max-width: 375px) {
    .title {
      padding-top: 270px;
    }
  }
  
  @media only screen and (max-width: 400px) {
    .title {
      padding-top: 0;
      font-size: 12px;
    }
    #toplogin img {
      width: 60px;
      height: auto !important;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .footer-bs .footer-nav,
    .footer-bs .footer-social,
    .footer-bs .footer-ns {
      border-left: solid 1px rgba(255, 255, 255, 0.10);
    }
    #toplogin img {
      width: 90px;
      height: auto !important;
    }
  }
  
  @media only screen and (max-width: 773px) {
    .title {
      padding-top: 5px;
      font-size: 15px;
    }
    #toplogin img {
      width: 90px;
      height: auto !important;
    }
  }
  
  @media only screen and (max-width: 1029px) {
    .title {
      padding-top: 5px;
      font-size: 20px;
    }
    #toplogin img {
      width: 100px;
      height: auto !important;
    }
    .panel-heading h1 {
      font-size: 25px;
    }
  }
  
  @media (max-width: 1118px) {
    .header img {
      width: 80px;
      height: auto !important;
    }
    .navbar-header {
      float: none;
    }
    .navbar-toggle {
      display: block;
      padding: 3px;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      /*        float: none!important;
  */
      margin: 0px -15px;
    }
    .navbar-nav&gt;li {
      float: none;
    }
    .navbar-nav&gt;li&gt;a {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .navbar-text {
      float: none;
      margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
      display: block!important;
    }
    .collapsing {
      overflow: hidden!important;
    }
    .dropdown-menu {
      font-size: 16px;
    }
  }
  </code></pre>