Highlight one menu item

Hey @christcaldwell,

You were really close – the only tweak that was really needed was to make sure the CSS was targeting the anchor element inside the menu item. Here’s some updated CSS for you to try.

.highlighted-menu-item a{
    background: #FFB6C1;
    border-radius: 35px;
    padding: 0px 20px;
    display:inline-block;
    line-height: 50px;
}

Worked great. Thank you so much for this help!
Chris

Hello again,

The highlighted menu solution worked well in desktop/laptop view, however, I noticed in cell phone view there is no left and right padding for this menu item labeled “CSI Brew Book.” It looks a little tight. How would I fix this?

https://brewtifuladventures.com

Also, is there an ability to put a jump to top button in place in this theme? Seems there might be too much scrolling when viewing in mobile phone.

Thank you so much for your help!
Chris

• This reply was modified 1 year, 1 month ago by chriscaldwell11.

Hey @chriscaldwell11! Can you try adding this additional css?

.is-menu-open .highlighted-menu-item a span{
  padding: 0 20px;
}

Hi Kavya,

Thank you so much, this worked perfectly. Can you please tell me how you figured it out, so that I can learn to do this? Thank you!

Chris

Hey @chriscaldwell11! It was mostly just some playing around in the browser inspector, especially with the simulated ‘hover’ and ‘focus’ states.

Mozilla has this great resource about how to use these features in the inspector: https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html

Thank you, Kavya. This is extremely helpful!