Aligning the nav folder title with the top option in the drop-down

Site URL: https://pigeon-harpsichord-afjm.squarespace.com

Hi everyone,

I'm trying to get the top drop-down option in my navigation folder to align with the folder title itself (this is as a workaround for the folder title not being clickable in 7.1).

I'm currently using this:
 

/* Nav folder */
.header-nav-folder-content {
    top: 0px !Important;
    width: auto !important;
}

But they are very slightly out of alignment. Has anyone got any ideas? I use a personal plan, so I'm trying to do it with CSS

Many thanks!
Password: HelloWorld1964

6 hours ago, Jodi_Ctrl said:

Site URL: https://pigeon-harpsichord-afjm.squarespace.com

Hi everyone,

I'm trying to get the top drop-down option in my navigation folder to align with the folder title itself (this is as a workaround for the folder title not being clickable in 7.1).

I'm currently using this:
 

/* Nav folder */
.header-nav-folder-content {
    top: 0px !Important;
    width: auto !important;
}

But they are very slightly out of alignment. Has anyone got any ideas? I use a personal plan, so I'm trying to do it with CSS

Many thanks!
Password: HelloWorld1964

What template do you use?

Try adding the following to your CSS.

padding-top: 0;

Let us know how it goes.

7 hours ago, creedon said:

Try adding the following to your CSS.

padding-top: 0;

Let us know how it goes.

Hey, thanks! It didn't work at first, but I added:
 

    padding-top: 0 !important;

and that did the trick! Can't believe I didn't try it before, thank you so much!

You wouldn't happen to know if it's also possible to hide the folder title text on hover, would you?

Replace (save a copy somewhere) or comment out your previous CSS and add the following.

.header-nav .header-nav-item--folder .header-nav-folder-content {

  padding-top: 0;
  top: 0;
  
  }

.header-nav .header-nav-item--folder:hover .header-nav-folder-title {

  visibility: hidden;
  
  }

.header-nav .header-nav-item--folder:hover .header-nav-folder-item a:first-child {

  padding-top: 0.05em;
  
  }

I don't think you'll need to use !important.

Let us know how it goes.

On 10/17/2020 at 8:26 PM, creedon said:

Replace (save a copy somewhere) or comment out your previous CSS and add the following.

.header-nav .header-nav-item--folder .header-nav-folder-content {

  padding-top: 0;
  top: 0;
  
  }

.header-nav .header-nav-item--folder:hover .header-nav-folder-title {

  visibility: hidden;
  
  }

.header-nav .header-nav-item--folder:hover .header-nav-folder-item a:first-child {

  padding-top: 0.05em;
  
  }

I don't think you'll need to use !important.

Let us know how it goes.

This worked absolutely perfectly, thank you so much!