If you’d like something like this:
Go to edit code > assets > base.css and add this:
#Details-HeaderMenu-5{
background-color: #ac3834;
border-radius: 40px;
}
Topic summary
Goal: style the “Try Berrybites” menu item with a colored background and 40px rounded corners, and set submenu text to black while keeping the main label white.
Key steps implemented:
- Background and radius: add in base.css — #Details-HeaderMenu-5 { background-color: #ac3834; border-radius: 40px; }.
- Submenu text color: target submenu links — #HeaderMenu-MenuList-5 a { color: #000000 !important; }.
- Main label color: target the span inside the menu item — #Details-HeaderMenu-5 .header__menu-item span { color: #FFFFFF !important; }.
Notes and troubleshooting:
- A prior rule (.header__menu-item { color: #000 !important; }) conflicted and needed removal.
- An intermediate attempt (.list-menu__item { color: #000; }) changed both submenu and main label; specificity adjustments fixed this.
Outcome: background color and 40px corner radius applied; submenu text is black; “Try Berrybites” label is white. Images were referenced for context, but the final solution is conveyed via CSS selectors. The issue appears resolved.
1 Like