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

Editing a specific drowdown menu item


elbarrad

Question

Hello!

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.  

image.png.d506937a51c9a522a6f07e18f05e5448.png

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


Thank you in advance! 

Link to comment

4 answers to this question

Recommended Posts

  • 0

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

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

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