Bootstrap .header_navigation problem in responsive mode (submenu overflow is hidden)

[MrsBeginner]

i have problem with bootstrap (v 3.4) responsive mode,

when i want to drop down the sub menu in responsive mode of menu, some of them become hidden when dropped down sub menu items overflow and cant be seen and select.

if you did not understand please look at my below example

i have below navbar code:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action 1</a></li>
            <li><a href="#">Action 2</a></li>
            <li><a href="#">Action 3</a></li>
            <li><a href="#">Action 4</a></li>
            <li><a href="#">Action 5</a></li>
          </ul>
        </li>
      </ul>
    
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

in responsive mode i can see Action 1,Action 2,Action 3 but i cant see Action 4 and Action 5 because this two items will go behind the bellow box, i mean when items overflow some of them cant be displayed.

[PaulOB]

@MrsBeginner

because this two items will go behind the bellow box,

You showed everything except the element that you were having problems with

The code you posted is working fine so I can’t tell how it will behave when you have content below it as I don’t know what rules you have applied to that content.

The dropdown has z-index of 1000 by default in bootstrap so if you have positoined elements below that dropdown that have a higher z-index or if you have a parent of the dropdown with a lower z-index then you could run into problems.

Assuming of course that I understood correctly and you are talking about content being hidden behind other content on the page. If so then you will need to raise the z-index of the navbar to be higher than any content that follows otherwise it will drop underneath the following content. Only positioned elements can have a z-index applied so as a test add a new class to your nav and try this.

<nav class="myNav navbar navbar-default">

.myNav{position:relative;z-index:1001;}