Change the background colour for each menu item

txt2nite

Hello you gave me code to change the colour of the background of each menu item. Can you help me to change the text colour of each menu item

The code you initially gave me was this

---

/**

• Changes Different Nav Background
• and Adds Left Padding
  ***************************************************/
  .sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item {
  padding-left:5px;
  }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(1) {
background:red;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover:nth-child(1) {
    background:blue;
    }

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(2),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(2) {
background:yellow;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(3),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(3) {
background:orange;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover,
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover {
background:green;
}

---

I can change all menu texts by adding this code

---

/* nav font colour */
.sm-page-widget-nav a {
color: #fff !important;
}

---

But how do I change the colour of the text for each menu item?

Hikin' Mike

/* nav font colour */
.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item:nth-child(1) a {
    color: white;
    }

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item:nth-child(2) a {
    color: red;
    }

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item:nth-child(3) a {
    color: blue;
    }

.sm-user-ui .sm-page-widget-nav-accordion.sm-page-widget-nav-color-emphasized .sm-accordion-item:nth-child(4) a {
    color: green;
    }

txt2nite

strange that doesn't seem to work for me!

Hikin' Mike

I'm not seeing that on your theme's custom CSS section.

txt2nite

Sorry I was using this on a custom page here

https://tubemapper.smugmug.com/Tube-Lines/Central

I thought that used the same code as the home page. The code doesn't work here

Hikin' Mike

/* nav font colour */
.sm-user-ui .sm-page-widget-nav-accordion .sm-accordion-item:nth-child(1) a {
    color: white;
    }

.sm-user-ui .sm-page-widget-nav-accordion .sm-accordion-item:nth-child(2) a {
    color: red;
    }

.sm-user-ui .sm-page-widget-nav-accordion .sm-accordion-item:nth-child(3) a {
    color: blue;
    }

.sm-user-ui .sm-page-widget-nav-accordion .sm-accordion-item:nth-child(4) a {
    color: green;
    }