Position of sliding navigation menu always below header

Question

I have the following jQuery menu which you can also find in the JSfiddle here :

 $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500).removeClass('active'); } else { $panel.slideDown(500).addClass('active'); } }); }); 

 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; display: flex; justify-content: space-between; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: yellow; } .image { width: 30%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } /* Navigation Mobile */ .navigation { width: 70%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: aqua; } .navigation>nav { } .navigation>nav>ul { list-style: none; margin: 0; padding: 0; } .navigation>nav>ul li a { display: block; text-decoration: none; color: black; } /* Navigation Button */ .navigation_button { width: 20%; height: 60%; float: right; cursor: pointer; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: fuchsia; } .bar1, .bar2, .bar3 { width: 100%; height: 20%; margin: 4% 0; background-color: #333; } /* Menu Content */ .menu_box { width: 100%; float: right; line-height: 2.0; box-sizing: border-box; border-style: solid; border-width: 1px; } .panel{ width: 100%; padding-left: 0%; cursor: pointer; font-weight: bold; overflow: hidden; display:none; } .button_menu { padding-left: 1%; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="image"> Image </div> <div class="navigation"> <div class="navigation_button"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="panel"> <ul class="menu_box"> <li class="button_menu"> 1.0 Menu </li> <li class="button_menu"> 2.0 Menu </li> <li class="button_menu"> 3.0 Menu </li> </ul> </nav> </div> </div> 

The menu works perfectly as long as the .navigation_button is the same size as the .navigation .

However, as you can see in the code above I lowered the height of the .navigation_button to height: 60%; and when I click now on the button the .panel will not appear below the .header . It will appear below the .navigation_button .

---

To solve this issue I tried to put position:absolute; to the .panel and then assigned the same height of the .header to the .panel but it did not work since the .panel slides in from the top of the page now.

Another idea I had was to close the .header <div> after the .navigation_button but once I did that the animation did not run anymore.

---

What do I need to change in my code to ensure that the .panel is always exactly below the .header no matter where the .navigation_button is positioned within the .header ?

Answer 1

add this code to '.panel'

position: absolute;
top:100%;
right: 0;

Answer 2

If you want the .panel to be positioned below the .header you could set it's position as absolute and then position it 0 from the left and 100% from the top of its first non-static parent which in your case is the .header (it is has a position value of fixed), this will make sure the .panel is below the .header but, in your example, the .panel doesn't stretch to pass the blue .navigation element width so if you want this then set the position of the .navigation element as relative.

See the demo below:

 $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500).removeClass('active'); } else { $panel.slideDown(500).addClass('active'); } }); }); 

 body { margin: 0; } .header { width: 80%; height: 20%; margin-left: 10%; display: flex; justify-content: space-between; position: fixed; top: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: yellow; } .image { width: 30%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } /* Navigation Mobile */ .navigation { position: relative; /* remove this if you want the panel to stretch further */ width: 70%; height: 100%; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: aqua; } .navigation>nav { } .navigation>nav>ul { list-style: none; margin: 0; padding: 0; } .navigation>nav>ul li a { display: block; text-decoration: none; color: black; } /* Navigation Button */ .navigation_button { width: 20%; height: 60%; float: right; cursor: pointer; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: fuchsia; } .bar1, .bar2, .bar3 { width: 100%; height: 20%; margin: 4% 0; background-color: #333; } /* Menu Content */ .menu_box { width: 100%; float: right; line-height: 2.0; box-sizing: border-box; border-style: solid; border-width: 1px; } .panel{ /* changes from here...*/ position: absolute; top: 100%; left: 0; /*...here*/ width: 100%; padding-left: 0%; cursor: pointer; font-weight: bold; overflow: hidden; display:none; } .button_menu { padding-left: 1%; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="image"> Image </div> <div class="navigation"> <div class="navigation_button"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> <nav class="panel"> <ul class="menu_box"> <li class="button_menu"> 1.0 Menu </li> <li class="button_menu"> 2.0 Menu </li> <li class="button_menu"> 3.0 Menu </li> </ul> </nav> </div> </div>