如何在导航栏中重叠之前显示汉堡图标

Question

我在导航栏中添加了一个新的菜单项，但现在当调整大小时，顶部的黄色Account菜单项(见屏幕截图((HTML中带有"导航栏右侧容器"的div(会向下移动到主导航栏中。如果我调整尺寸更小，汉堡图标就会出现。我希望汉堡图标在顶部菜单项重叠到另一个导航栏之前出现。下面是HTML的一个片段。我试着按照其他帖子的建议在身体上添加填充物，但没有奏效。如何使汉堡图标在重叠之前显示？谢谢

<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
&nbsp;
</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>

我的导航栏

Answer 1

如果没有一个有效的例子，很难进行假设。但几乎可以肯定的是，您应该在CSS断点中添加一些。添加12em或200px。或者创建一个全新的断点来专门关注该元素。

你可以采用一些技巧，比如负边距来抵消新元素对布局的影响。这可能会影响您的点击能力，并需要更多的规则。