Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
mylesrh

how to move subnav flush with header

Question

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
.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;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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 😕

Share this post


Link to post
  • 0

Try this instead:

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

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
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!

Share this post


Link to post
  • 0

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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...