Jump to content

how to move subnav flush with header

Recommended Posts

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/

image.thumb.png.fdc3f1822ae315f94f9b604683b14452.png

Link to comment
  • Replies 5
  • Views 457
  • Created
  • Last Reply
.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;
}

 

Link to comment
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 😕

Link to comment
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!

Link to comment

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.