Custom CSS for specific menu items

[Yael]

Hello,

Using the off panel menu for all devises, I want to highlight two menu items so I’ve added a custom css class to those menu items (student) but can’t figure out how to target the menu item in the off panel menu.

You can view the site here

https://staging.jessicaeary.com/

Password: Jessica

Can you help with this css rule?

[Yael]

My goal is to highlight the My Account and My Courses links for students (which only show when logged in). Since you won’t see those when not logged in, I’ve added the custom class “student” to the Inspired Messages menu item.

[David]

Hi there,

you can do this:

#generate-slideout-menu .slideout-menu li.student a {
  color: #f00;
  background-color: #000;
  border: 1px solid #fff;
}
#generate-slideout-menu .slideout-menu li.student:hover a {
  /* hover styles here */
}

And thank you for making it easy for us to help with the CSS 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Yael]

Thank you, David.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts