how to move subnav flush with header

Site URL: https://therare.la

site: https://therare.la

password: rarity

Hello - I'm really close to getting my site done but I need to figure out how to move the subnav dropdown so that the top border of it is flush with the bottom border of the main navigation bar. I can do this by adding CSS to move it downward, but the problem is that the subnav only appears when the top level nav item is being hovered. Adding this extra space makes it so that when I try to mouse down to the subnav menu, it disappears before the mouse can actually hover any subnav items. Perhaps the clickable area of the top level nav item must be augmented - how can I circumvent the issues I'm having to achieve the desired result? Here is a reference site that behaves as intended https://cookies.co/

.header-nav-folder-item {
    background: #383838;
}

.header-nav-folder-content {
    padding-top: calc(1vw + .9rem - 3px) !important;
    background: transparent !important;
}

You need to remove this from your custom CSS

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

1 hour ago, rwp said:

.header-nav-folder-item {
    background: #383838;
}

.header-nav-folder-content {
    padding-top: calc(1vw + .9rem - 3px) !important;
    background: transparent !important;
}

You need to remove this from your custom CSS

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

 

I tried to replace the latter block with the former block and it didn't seem to have the desired effect. It only made the subnav text bigger and aligned it differently 😕

Try this instead:

.header-nav-folder-item {
    background: #383838;
}

.header-nav-folder-content {
    padding-top: calc(1vw + 8px) !important;
    background: transparent !important;
}

6 hours ago, rwp said:

Try this instead:

.header-nav-folder-item {
    background: #383838;
}

.header-nav-folder-content {
    padding-top: calc(1vw + 8px) !important;
    background: transparent !important;
}

 

had to change the 8px to 1px but this worked. Thank you so much!

I just though of something else, this will make the sub folder a little more "sticky". I feel like its always a little easy to miss scrolling down to it and sometimes it goes away (on all squarespace pages)....

Add this to the .header-nav-folder-content code:

margin-top: -10px;

You will have to adjust the padding-top again by adding 10 px to it.