How to get this bootstrap drop-down to appear on top of fixed page header?

Question

Does anyone know what amendment would need to be made to the code at http://jsfiddle.net/ufkkdbja/ so that when the hamburger is clicked the whole menu appears (and doesn't get truncated by the fixed page header?

  <header class="outer page-header">
<div class="dvTableTop">
    <div class="dvTableTopRow">
        <div class="dvTableTopRowCellLeft">
            <div class="container menu1">
                <!-- Dropdown left -->
                <div class="dropdown dropdownMenu">                        
                    <button class="c-hamburger c-hamburger--htla" id='btSwitch' type="button" data-toggle="dropdown">
    <span>toggle menu</span>
</button>
                    <ul class="dropdown-menu">
                        <li>
                            <asp:LinkButton ID="LinkButton1" runat="server">Home</asp:LinkButton></li>

TIA Mark

Answer 1

You've added .page-header overflow: hidden , remove it or make it visible instead.

.page-header {
   overflow: visible;
}

Answer 2

在CSS中，对于“ .page-header”，删除“ overflow：hidden;”。