Look of the dropdowns are different in different screen sizes

In my navbar I have put two dropdowns: one for a menu and another one for login. It works well when the width of the screen is bigger than 768px. But when it is less than 768px, dropdowns do not look as they looked before when the screen size is bigger.

Here you can see it in jsfiddle.

It's just a Bootstrap navbar.

<!-- mobile menu dropdown -->
<ul class="nav navbar-nav pull-right mobile-menu col-xs-6">
   <li class="dropdown">
	 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
		<span class="glyphicon glyphicon-align-justify glfcn" aria-hidden="true"></span>
		<!-- <b class="caret"></b> -->
	 </a> 
	 <ul class="dropdown-menu dropdown-menu-right">
	   <li><a href="#">page 1</a></li>
	   <li><a href="#">page 2</a></li>
	   <li><a href="#">page 3</a></li>
	 </ul>
  </li>
</ul><!-- mobile menu dropdown end-->

Just try with different screen sizes, you will see that the look gets changed. Why is this? How to solve this problem?

Bootstrap applies the following code to dropdowns in navabars on small screens:

<!-- language: lang-css -->

@media (max-width: 767px) { 
    .navbar-nav .open .dropdown-menu {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      background-color: transparent;
      border: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
}

This is helpful because most mobile users will expect full width navigational menus from navbar dropdowns.

If you want to prevent it, you can just override those styles. Here's how you can apply the original styles by adding the class .box-navbar:

<!-- language: lang-css -->

.navbar-nav .open  .dropdown-menu.box-navbar {
    position: absolute;
    float: left;
    margin-top:2px;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

Demo in Fiddle