How to get hamburger icon to show before overlap in navbar - navbar

Question

I added a new menu item to a navbar, but now when resizing smaller, the top Account menu item in yellow(see screenshot)(the div with 'navbar-right-container' in the HTML) moves down into the main navbar. If I resize even smaller, the hamburger icon shows up. I want the hamburger icon to show up before the top menu item overlaps into the other navbar. Below is a snippet of the HTML. I tried adding padding to the body as suggested by other posts but that did not work. How can I get the hamburger icon to show up before it overlaps? Thanks.
<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-middle-container">
<ul class="nav navbar-nav navbar-middle">
<li>
<a href="javascript:openModalAction('/Manage/Accounts')" class="navbar-account-switch">
<span>Account:<br />My Account</span> <span class="caret caret-right caret-collapsible"></span>
</a>
</li>
<li class=" nobr">
<a href="/" title="My Dashboard" >
DASHBOARD
</a>
</li>
<li class=" dropdown nobr">
<a href="/Quotes" class="dropdown-toggle" data-toggle="dropdown">
ACCOUNTS
<b class="caret caret-collapsible"></b>
</a>
<div class="dropdown-menu dropdown-menu-multicolumn ">
<div class="dropdown-menu-head"><div class="dropdown-menu-head-border"></div></div>
<table class="table table-condensed">
<tr>
<td>
<ul class="dropdown-menu-col">
<li class="nobr"><div class="dropdown-menu-col-header">MANAGE</div></li>
.......................................<div class="navbar-right-container">
<ul class="nav navbar-nav navbar-right">
<li class=" dropdown nobr">
<a href="/Quotes" title="Manage Account" class="dropdown-toggle" data-toggle="dropdown">
My name
<b class="caret"></b>
</a>
My Navbar

Answer 1

It is hard to presume without a working example. But almost certainly you should add some to your CSS breakpoint. Add 12em or 200px. Or make an entirely new breakpoint to focus specifically on that element.
You could resort to hacky tricks like negative margin width to offset the new element's impact on the layout. This may affect your ability to click and require even more rules.