Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 364
  • Created
  • Last Reply
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?

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

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

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.