Jump to content

Editing a specific drowdown menu item

Recommended Posts


I am currently trying to edit the css of a dropdown menu. I have following Inside the Square's tutorial, which has been very helpful. I am now trying to change the style of a specific item on that list, but cannot figure out which selector to use. 

This is the code I used to customize the dropdown menu...

.header-nav-folder-content {
  text-align: left !important;
  background-color: #E6E6E6 !important;
  padding-bottom: 20px !important;

.header-nav-folder-content a {
  padding-top: 15px !important;
  border-bottom: 1px solid black;
  text-transform: capitalize;
  color: black !important;

... which has resulted in this.  


Now, I would like to specifically change the style of "Test 3".

Thank you in advance! 

Link to comment

Thank you very much for that! I tried this, but I think I might be missing something. 

.header-nav-folder-content a:nth-child:(3) {
	color: red !important;

The website remains unpublished, so that is why I am unable to post a link. Totally understand - thanks for the help nonetheless! 

Link to comment

You have an extra colon at the end of your code above:

.header-nav-folder-content a:nth-child(3) {
	color: red !important;

You could also get more specific with your targeting:

.header-nav-folder-content .header-nav-folder-item:nth-child(3) /* a:nth-child(3) */ {
	color: red !important;

I've added the slashy's just in case you need to use a combination.

Link to comment

Thank you very much for your help! It remained unchanged, but I tried some other selectors, and this seems to work for changing the alignment and background of a specific nth-child: 

#header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-desktop > div.header-title-nav-wrapper > div.header-nav > div > nav > div.header-nav-item.header-nav-item--folder.header-nav-item--active > div > div.header-nav-folder-item.header-nav-folder-item--active:nth-child(3) {
	text-align: right !important;


Link to comment

Create an account or sign in to comment

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

  • 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.