How Do I Highlight a Menu Bar Item in SoCast Engage Like the 'Listen Live' Button?

How Do I Highlight a Menu Bar Item in SoCast Engage Like the 'Listen Live' Button?

Currently, in SoCast Engage, the ability to change the background color of individual menu bar elements is only available for the "Listen Live" button by default. However, you can rearrange which menu items appear in the top navigation and use custom CSS to highlight a specific menu item.

To rearrange menu items:

  1. Log in to SoCast Engage.
  2. Navigate to Website Pages > All Pages > Menu.
  3. Drag and drop menu items to change their order. Only six parent menu items (including Home) can appear in the top menu; additional items will appear in the dropdown (hamburger) menu.

To highlight a menu item using custom CSS:

  1. Go to Website > Website Settings > Themes > Launch Theme Editor > Additional CSS.
  2. Add your custom CSS code to target the menu item you want to highlight. For example, to highlight the sixth menu item with a pink background and white text, you can use:
  3. .nav-lower li:nth-child(6) {
      background-color: #EF1B8C;
      color: white !important;
    }
    .nav-lower li:nth-child(6):hover {
      background-color: black !important;
      color: white !important;
    }
    .nav-lower li:nth-child(6) * {
      color: white !important;
    }
    
  4. Click Save to apply the changes.

Note: Any CSS added here will apply site-wide, so review changes carefully. The exact menu item targeted by li:nth-child(6) depends on your menu order. Adjust the selector as needed for your specific menu structure.

If you need further assistance or want to highlight a different menu item, please contact SoCast Support.