Navigation Border and Mega Menu

Hi, 

I am having two difficulties I'd like help with. 

website

password: accesscode

1) I'd like there to be no bottom border on the header until you scroll ever so slightly. 

2) I'd like for open mega menus to have the same border (1px, solid, #BDBDBD) at the bottom only, and rid the header of its bottom border. I've been able to make the header border disappear with an open mega menu with this code:

.wm-active-mega-menu {.header-border {
display:none!important;
  }}

but I can't figure out how to make a code for the divider on the mega menu to appear. When I try putting dividers into the footer section of the mega menu, the mega menus stop working altogether. 

Thanks in advance for your help!
  

Hi, does anyone have any advice for this, perhaps @tuanphan?

Or perhaps @Beyondspace

@tuanphan thank you for your help!

1# I was wondering if there is a way to make this transition a bit smoother, so it doesn't seem to appear out of nowhere, I've added a transition of 0.2s for the outgoing but I can't seem to have the same apply for the incoming line.

#2 yes, took me a while but I figured it out!

@Molololol

Great site! I was wondering what you used to make the mega-menu for your site?

Hi @Ricky10 I used the will myers mega menu plugin, its $10 and very easy to install

https://www.will-myers.com/products/p/mega-menu-for-squarespace-71