Positioning mega menu on a sticky navbar

Site URL: http://www.brandyglows.com

Hello, friends!

I'm on 7.0 using the Brine template. I am helping my wife with some custom CSS for the navigation menu on her SquareSpace site. I've implemented a caret-style dropdown menu, and I have figured out the styles for a sticky header. Here's the problem. In order to get the mega menu working, I first styled the dropdown section using `position: fixed` as follows:

/* Style mega menu */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder 
{
  outline: 1px solid purple
  visibility: hidden;
  margin: 0;
  height: auto;
  width: 100vw;
  position: fixed;
  top: 9.5rem;
  left: 0;
  letter-spacing: 0;
  line-height: 1.5rem;
  box-shadow: inset .05rem .05rem .15rem .015rem rgba(0, 0, 0, 0.075);
}

/* Reveal mega menu on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder 
{
  visibility: visible;
}

Note about the below property: I used this strictly for diagnostic purposes.

`outline: 1px solid purple`

Here is the styling on the navbar:

/* Sticky header */
.Header.Header--bottom 
{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 3.5rem !important;
  z-index: 999 !important;
  background-color: #FFF;
  box-shadow: 0 0 .1rem .05rem rgba(0, 0, 0, 0.15);
}

The dropdown worked well before the navbar was `sticky`, but now it is out of position when the user scrolls down, which makes sense. Where the real headache comes in is when I tried to change it to `position: absolute` in an effort to keep it close to the navbar. When I do this, the element scales on resize, and rather than remain full width, it leaves a gap on one side despite setting `width: 100vw`. I know this is probably a noob thing, but I am racking my brain to figure out what to do.

Site — http://www.brandyglows.com
Password — 'temp'

If anyone could have a look and offer a tip, I would be hugely grateful.

@brandyglows I am not sure how to do this but I did find a link that may be helpful. Unfortunately it is not a free resource but hopefully it points you in the right direction.

https://www.squarestylist.com/shop/mega-menu

Hello, what CSS can work to be able to have a mega menu in Hayden 7.0? Thank you very much!