Dropdown changing width as browser gets smaller - html

Question

Everything seems to work fine when the browser size is large... but when the dropdown on the right is open and the user shrinks the browser size... the dropdown on the right changes width and the user image floats from right to left.
I have tried given it a fixed width... it fixed the width but still floats left. Seems to be something with bootstrap not my custom styling
JSFiddle Demo
img.logo {
margin-top: -12px;
height: 55px;
}
.navigation .top-nav .navbar-inverse li a {
height: 60px;
line-height: 30px;
}
.navigation .top-nav a,
.navigation .top-nav .navbar-nav>li>a {
color: white;
}
.navbar-inverse .navbar-nav>.user.open>a,
.navbar-inverse .navbar-nav>.user.open>a:hover,
.navbar-inverse .navbar-nav>.user.open>a:focus {
background-color: #282c36;
}
#profile-img {
height: 40px;
width: 40px;
border-radius: 40px;
margin-right: 10px;
position: relative;
bottom: 3px;
}
.user .dropdown-menu {
background-color: #282c36;
border: 0;
text-align: center;
color: white;
min-width: 100px !important;
}
.user .dropdown-menu li {
padding: 5px 0 5px 0;
margin: 0 15px 0 15px;
height: 50px !important;
background-color: #282c36 !important;
color: white !important;
}
.user .dropdown-menu li a {
height: 100% !important;
background-color: #282c36 !important;
color: white !important;
}
.user .dropdown-menu li:hover,
.user .dropdown-menu li a:hover {
cursor: pointer;
background-color: #282c36 !important;
color: white;
}
.navigation .top-nav .navbar-inverse>ul>li {
padding-left: 8px;
}
.top-nav .navbar-collapse.collapse {
display: block!important;
}
.top-nav .navbar-nav>li,
.navbar-nav {
float: left !important;
}
.top-nav .navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.top-nav .navbar-right {
position: absolute !important;
right: 15px !important;
}
#media(max-width: 767px) {
.navigation .top-nav .navbar-inverse {
height: 60px;
}
.top-nav .navbar-right {
float: right !important;
position: absolute !important;
top: -8px !important;
right: 15px !important;
}
.top-nav .cart a {
margin-top: 6px;
}
.top-nav .user {
top: 5px;
}
.top-nav .cart {
padding-top: -5px !important;
}
.top-nav .user .dropdown-menu {
z-index: 999 !important;
background-color: #282c36 !important;
position: relative !important;
top: -5px;
}
.top-nav .navbar-header {
height: 60px !important;
}
.navigation .top-nav .navbar-inverse a {
line-height: 30px;
}
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="top-nav">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<li class="dropdown user">
<img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i>
<ul class="dropdown-menu">
<li>Testing </li>
<li>Contact us</li>
<li>Test</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
First screen shot
Second Screen shot

Answer 1

This css update will fix your width issue.
.navbar-right, .dropdown, .dropdown-menu {
width: 130px;
}
JSFiddle Link
Looks like you have a few other issues though (nav bar edges straighten out when short, line appears in nav bar when short, height of drop-down lines change when short).

Answer 2

Bootstrap's navbar classes have media queries that adjust positioning so they integrate with the toggleable mobile navbar. But you aren't using it and the navbar-right class used on the that the dropdown is in has a media query that adjusts positioning at max width:767px that likely causes the issue you're seeing.
You will have to either change that media query in the bootstrap css file (alternatively add your own css to prevent those media query changes, but may be messy. As an example, I tried in the jsfiddle by adding .user{min-width: 160px;} which partially solved your issue, you'll see what I mean by adding that), or use a dropdown with your own classes (you can easily start with one of these).

Answer 3

Find the code snippet for your question. Thanks.
.top-nav {
float: left;
width: 100%;
clear: both;
}
img.logo {
margin-top: -12px;
height: 55px;
}
.navigation .top-nav .navbar-inverse li a {
height: 60px;
line-height: 30px;
}
.navigation .top-nav a,
.navigation .top-nav .navbar-nav>li>a {
color: white;
}
.navbar-inverse .navbar-nav>.user.open>a,
.navbar-inverse .navbar-nav>.user.open>a:hover,
.navbar-inverse .navbar-nav>.user.open>a:focus {
background-color: #282c36;
}
#profile-img {
height: 40px;
width: 40px;
border-radius: 40px;
margin-right: 10px;
position: relative;
bottom: 3px;
}
.user .dropdown-menu {
background-color: #282c36;
border: 0;
text-align: center;
color: white;
min-width: auto !important;
}
.user .dropdown-menu li {
padding: 5px 0 5px 0;
margin: 0 15px 0 15px;
height: 50px !important;
background-color: #282c36 !important;
color: white !important;
}
.user .dropdown-menu li a {
height: 100% !important;
background-color: #282c36 !important;
color: white !important;
}
.user .dropdown-menu li:hover,
.user .dropdown-menu li a:hover {
cursor: pointer;
background-color: #282c36 !important;
color: white;
}
.navigation .top-nav .navbar-inverse>ul>li {
padding-left: 8px;
}
.top-nav .navbar-collapse.collapse {
display: block!important;
}
.top-nav .navbar-nav>li,
.navbar-nav {
float: left !important;
}
.top-nav .navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.top-nav .navbar-right {
position: absolute !important;
right: 15px !important;
}
#media(max-width: 767px) {
.navigation .top-nav .navbar-inverse {
height: 60px;
}
.top-nav .navbar-right {
float: right !important;
position: absolute !important;
top: -8px !important;
right: 15px !important;
}
.top-nav .cart a {
margin-top: 6px;
}
.top-nav .user {
top: 5px;
}
.top-nav .cart {
padding-top: -5px !important;
}
.top-nav .user .dropdown-menu {
z-index: 999 !important;
background-color: #282c36 !important;
position: relative !important;
top: 50px;
}
.top-nav .navbar-header {
height: 60px !important;
}
.navigation .top-nav .navbar-inverse a {
line-height: 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-nav">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="logo" />
</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown user">
<img src="http://freefacebookhakken.nl/img/profile-pic.png" id="profile-img"><i class="glyphicon glyphicon-chevron-down" id="profile-toggle"></i>
<ul class="dropdown-menu">
<li>Testing </li>
<li>Contact us</li>
<li>Test</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>