Menu Dropdown Tabs expand upwards instead of downwards

Hello! I've used custom CSS to stick my header to the bottom of the webpage, however, the menu dropdown items are no longer visible when you hover (unless you scroll all the way to the bottom of the page) because they are expanding downwards. I would like for my menu items to expand upwards on-hover. 

Here's the website with the header at the bottom of the screen. You can see that the subtabs are cut-off when expanded. https://www.thecomptonartsproject.org

Here's the custom CSS I added: 

.header-nav-folder-content {
   background: #02BAC6 !important;
}

header {
  position: sticky!important;  
  bottom: 0;  
  width: 100%;  
  z-index: 9999;  
  order:2;
} 
 Adjustments for the mobile menu 
.header-menu {
 position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: auto;
  max-height: 100%;
  overflow-y: hidden !important;
  z-index: 1;
}

 Move CTA Button Placement 
.header-menu-cta {
  position: sticky;
  bottom: 25%!important; 
}

Please let me know if you notice anything missing/anything I should add! I would really appreciate it!

8 hours ago, tuanphan said:

You can use this CSS code under

div.header-nav-folder-content {
    top: unset !important;
    bottom: 30px !important;
}

Incredible!!!!! Thank you so much tuanphan!!! 🙂