bootstrap dropdown menu going behind content on small screens

Question

I did a dropdown with bootstrap but it looks really bad when i resize the screen to a small size, it works fine normally but the dropdown starts hiding behind the other content when small

Is there anyway for it to go on top of the other content?

relevant html

<div class="container-fluid no-padding">
  <div class="row">
    <div class="col-xs-12">
      <nav class="navbar navbar-inverse nav-row">
        <a class="navbar-brand" href="#">Locket</a>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle dropdown-display" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{currentUser}}</a>

            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li ng-click="logout()"><a href="#">Log Out</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="row">

    <div class="col-xs-4 friendListWindow">
      <p class="windowTitle text-center">Friends List</p>
      <form class='form-control-inline' ng-submit='addFriend(newFriendUsername)' name='addFriendForm'>
        <div class='form-group'>
          <input autocomplete='off' class='form-control input-display' type='text' name='newFriendUsername' ng-model='newFriendUsername' required/>
          <button class='btn btn-default button-display form-control' type='submit' ng-disabled='!addFriendForm.$valid'><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
        </div>
      </form>

      <span ng-if='sentRequest' class="friendReqSent">{{friendReqMsg}}</span>
      <p class="friendHeaders">Friend Requests</p>
      <div class="friendRequests">
        <ul class="friendList">
          <li class="friendRequest" ng-repeat='friend in friendRequests track by $index'>
            <div class='form-control-inline'>
              <span>New friend request from: {{friend}}</span>
              <div class="friendRequestOptions">
                <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-ok vertical-center' aria-hidden='true' ng-click='acceptFriendRequest(friend)'></span></button>
                <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-remove vertical-center' aria-hidden='true' ng-click='ignoreFriendRequest(friend)'></span></button>
              </div>
            </div>
          </li>
        </ul>
        <div class="acceptedfriendRequests">
          <ul class="friendList">
            <li class="friendRequest" ng-repeat='friend in acceptedfriendRequests track by $index'>
              <span>{{friend}} accepted your friend request</span>
              <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-ok vertical-center' aria-hidden='true' ng-click='acknowledgeFriendRequest(friend)'></span></button>
            </li>
          </ul>
        </div>
      </div>

css:

html, body {
  height: 100%;
  font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p {
  margin-left: 10px;
}

ul {
  margin: 0;
}

img {
  width: 100%;
}

.icon {
  max-width: 20px;
  margin: 0;
}

.form-group {
  margin-bottom: 0;
}

.messages {
  padding-bottom: 5px;
}

.message-right {
  text-align: right;
}

.message-left {
  text-align: left;
}

.messageText {
  border-color: transparent;
  border-radius: 15px;
  display: inline-block;
  padding: 6px;
}

.wrapMessage {
  width: 300px;
  word-break: break-word;
  text-align: left;
}

.messageTextFrom {
  background-color: aliceblue;
}

.messageTextTo {
  background-color: beige;
}

.chatWindow {
  height: 95vh;
  padding-left: 0;
}

.friendHeaders {
  font-size: 18px;
  padding-top: 10px;
  margin-left: 10px;
}

.friendSearch {
  width: 60%;
  display: inline;
  vertical-align: middle;
  float:right;
  margin: 8px 13px 5px 5px;
  max-height: 26px;
}

.friendRequests {
  border-bottom: 1px solid lightgray;
}

.friendRequest {
  border-top: 1px solid lightgray;
  padding: 10px;
}

.friendRequestOptions {
  display: inline;
}

.friendListWindow {
  height: 95vh;
  border-right: 1px solid lightgray;
  padding-right: 0;
}

.friendList {
  list-style: none;
  padding-left: 0;
}

.friendPanel {
  border-left: 0px;
  border-right: 0px;
  border-radius: 0px;
  padding: 10px 10px 10px 10px;
  margin-bottom: 0px;
}

.activeFriendPanel {
  background-color: #bfd4d9;
}

.friendArrow {
  float: right;
  color: #ddd;
}

.friendReqSent {
  display: inline-block;
  float: right;
  font-size: 16px;
  padding: 10px;
}

.friendButton {
  display: inline;
  padding: 0 10px 0 10px;
  float: right;
}

.messageList {
  height: 82.5vh;
  overflow: auto;
}

.friendScroll {
  height: 70vh;
  overflow: auto;
}

.dropdown-toggle {
  margin-right: 34px;
  color: #bfd4d9 !important;
}

.navbar {
  position:relative;
  z-index: 1000;
}


.navbar-brand {
  font-family: "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #bfd4d9 !important;
  text-transform: uppercase;
  margin-left: 13px !important;
  font-size: 28px;
}

.unreadMessage {
  display: inline-block;
  background-color: lavender;
  border-radius: 10px;
  padding: 5px;
  color: black;
}

.loginFailed {
  float: left;
  color: white;
  margin-top: 3px;
  margin-right: 8px;
}

img {
  margin-top: 30px;
  margin-left: 24px;
}

.no-padding {
  padding: 0 !important;
  margin: 0 !important;
}

.nav-row {
  margin-bottom: 0px;
  height: 5vh;
  background-color: #252839;
  border-color: #252839;
  border-radius: 0;
}

.form-control-inline {
  min-width: 0;
  width: auto;
  display: inline;
  vertical-align: middle;
  position: relative;
}

.input-display {
  width: 90%;
  display: inline;
  vertical-align: middle;
}

.button-display {
  width: 8%;
  display: inline;
  vertical-align: middle;
  text-align: center;
  border: none;
}

.windowTitle {
  border-bottom: 1px solid lightgray;
  padding: 5px 0px 5px 0px;
  font-size: 18px;
  font-weight: bold;
  margin-left: 0;
}

.btn {
  font-family: "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.navbar-right {
  margin-right: 0;
  position:relative;
}

.dropdown-display {
  margin-right: 13px;
}

.vertical-center {
  vertical-align: middle;
}

.friendButton {
  width: 8%;
  float: right;
  border: none;
  margin-left: 10px;
  padding-bottom: 5px;
}

.encryptionIndicator {
  display: inline-block;
  float: right;
  padding-right: 10px;
  cursor: pointer;
  font-size: 16px;
}

.encryptionOn {
  color: green;
}

.encryptionOff {
  color: red;
}

Answer 1

Your problem is that in Bootstrap by default dropdowns used on navbar have position: static on screens below 980px.

You can use CSS to override styles (and add no-collapse class to your .dropdown-menu .

CSS:

.navbar .dropdown-menu.no-collapse:before {
  left: auto;
  right: 12px;
}
.navbar .dropdown-menu.no-collapse:after {
  left: auto;
  right: 13px;
}
@media (max-width: 979px) {
  .navbar .dropdown-menu.no-collapse {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    float: left;
    margin: 0;
    padding: 4px 0;
    position: absolute;
    top: 100%;
  }
  .navbar .dropdown-menu.no-collapse:before,
  .navbar .dropdown-menu.no-collapse:after {
    display: block;
  }
  .navbar .dropdown-menu.no-collapse li + li a {
    margin-bottom: 0;
  }
  .navbar .dropdown-menu.no-collapse .divider {
    display: list-item;
  }
  .navbar .dropdown-menu.no-collapse a {
    border-radius: 0;
    color: #333333;
    font-weight: normal;
    padding: 3px 15px;
  }
  .navbar .dropdown-menu.no-collapse a:hover,
  .navbar .dropdown-menu.no-collapse .active a,
  .navbar .dropdown-menu.no-collapse .active a:hover {
    background-color: #0088cc;
    color: #ffffff;
  }
  .btn-group.open .dropdown-menu.no-collapse {
    display: block;
    margin-top: 1px;
    border-radius: 5px;
  }
}

CODEPEN

Answer 2

Since if looks like you want to keep your dropdown visible across all viewports you can set the dropdown/links inside the navbar-header class and then use a button dropdown with navbar-btn class which will take care of alot of the box.

.navbar.navbar-custom .navbar-upper {
    position: absolute;
    right: 0px;
}
.navbar.navbar-custom .navbar-upper .dropdown-menu {
    right: 0;
    left: auto;
}

You just need to set a position if you want it on the right side always and so the dropdown-menu is opens on the correct side, everything else is just styling.

 /*NEW CSS RULES*/ .navbar.navbar-custom { padding-top: 5px; padding-bottom: 0; } .navbar.navbar-custom .navbar-upper { position: absolute; right: 0; } .navbar.navbar-custom .navbar-upper .dropdown-menu { right: 0; left: auto; } .navbar.navbar-custom .navbar-upper .navbar-btn.btn-drop { background: none; border: none; color: #bfd4d9; } .navbar.navbar-custom .navbar-brand { font-family: "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; color: #bfd4d9; text-transform: uppercase; font-size: 28px; } /*Original CSS Starts Here*/ html, body { height: 100%; font: 300 16px/22px"Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } p { margin-left: 10px; } ul { margin: 0; } img { width: 100%; } .icon { max-width: 20px; margin: 0; } .form-group { margin-bottom: 0; } .messages { padding-bottom: 5px; } .message-right { text-align: right; } .message-left { text-align: left; } .messageText { border-color: transparent; border-radius: 15px; display: inline-block; padding: 6px; } .wrapMessage { width: 300px; word-break: break-word; text-align: left; } .messageTextFrom { background-color: aliceblue; } .messageTextTo { background-color: beige; } .chatWindow { height: 95vh; padding-left: 0; } .friendHeaders { font-size: 18px; padding-top: 10px; margin-left: 10px; } .friendSearch { width: 60%; display: inline; vertical-align: middle; float: right; margin: 8px 13px 5px 5px; max-height: 26px; } .friendRequests { border-bottom: 1px solid lightgray; } .friendRequest { border-top: 1px solid lightgray; padding: 10px; } .friendRequestOptions { display: inline; } .friendListWindow { height: 95vh; border-right: 1px solid lightgray; padding-right: 0; } .friendList { list-style: none; padding-left: 0; } .friendPanel { border-left: 0px; border-right: 0px; border-radius: 0px; padding: 10px 10px 10px 10px; margin-bottom: 0px; } .activeFriendPanel { background-color: #bfd4d9; } .friendArrow { float: right; color: #ddd; } .friendReqSent { display: inline-block; float: right; font-size: 16px; padding: 10px; } .friendButton { display: inline; padding: 0 10px 0 10px; float: right; } .messageList { height: 82.5vh; overflow: auto; } .friendScroll { height: 70vh; overflow: auto; } .unreadMessage { display: inline-block; background-color: lavender; border-radius: 10px; padding: 5px; color: black; } .loginFailed { float: left; color: white; margin-top: 3px; margin-right: 8px; } img { margin-top: 30px; margin-left: 24px; } .no-padding { padding: 0 !important; margin: 0 !important; } .form-control-inline { min-width: 0; width: auto; display: inline; vertical-align: middle; position: relative; } .input-display { width: 90%; display: inline; vertical-align: middle; } .button-display { width: 8%; display: inline; vertical-align: middle; text-align: center; border: none; } .windowTitle { border-bottom: 1px solid lightgray; padding: 5px 0px 5px 0px; font-size: 18px; font-weight: bold; margin-left: 0; } .btn { font-family: "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .vertical-center { vertical-align: middle; } .friendButton { width: 8%; float: right; border: none; margin-left: 10px; padding-bottom: 5px; } .encryptionIndicator { display: inline-block; float: right; padding-right: 10px; cursor: pointer; font-size: 16px; } .encryptionOn { color: green; } .encryptionOff { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-inverse navbar-static-top navbar-custom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Locket</a> <div class="navbar-upper"> <div class="btn-group"> <button type="button" class="btn navbar-btn btn-drop dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{currentUser}}</button> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li ng-click="logout()"><a href="#">Log Out</a> </li> </ul> </div> </div> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-12 friendListWindow"> <p class="windowTitle text-center">Friends List</p> <form class='form-control-inline' ng-submit='addFriend(newFriendUsername)' name='addFriendForm'> <div class='form-group'> <input autocomplete='off' class='form-control input-display' type='text' name='newFriendUsername' ng-model='newFriendUsername' required/> <button class='btn btn-default button-display form-control' type='submit' ng-disabled='!addFriendForm.$valid'><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </form> <span ng-if='sentRequest' class="friendReqSent">{{friendReqMsg}}</span> <p class="friendHeaders">Friend Requests</p> <div class="friendRequests"> <ul class="friendList"> <li class="friendRequest" ng-repeat='friend in friendRequests track by $index'> <div class='form-control-inline'> <span>New friend request from: {{friend}}</span> <div class="friendRequestOptions"> <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-ok vertical-center' aria-hidden='true' ng-click='acceptFriendRequest(friend)'></span> </button> <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-remove vertical-center' aria-hidden='true' ng-click='ignoreFriendRequest(friend)'></span> </button> </div> </div> </li> </ul> <div class="acceptedfriendRequests"> <ul class="friendList"> <li class="friendRequest" ng-repeat='friend in acceptedfriendRequests track by $index'> <span>{{friend}} accepted your friend request</span> <button class='btn btn-default friendButton'><span class='glyphicon glyphicon-ok vertical-center' aria-hidden='true' ng-click='acknowledgeFriendRequest(friend)'></span> </button> </li> </ul> </div> </div> </div> </div> </div>