- This topic has 5 replies, 2 voices, and was last updated 7 years, 8 months ago by
.
Hi,
When I am on a page and look at the menu that includes that page, its menu item is displayed highlighted. When it is highlighted, that menu item overlaps the menu item below it. See the attached image. Please let me know how I can fix this. You can see this problem by viewing the site at https://www.hightechhealth.com/understanding-emf/
Thanks!
Erik
Hi Erik,
Thank you for your question.
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container #header-navigation .sh-nav .current_page_item { height: auto !important; }Best regards,
Shufflehound teamHi.
Great, thank you. That works. However I need one more fix to finish this. The highlighted menu items that word-wrap are using a different line-height than the non-highlighted menu items. See attached image. I would like them to be the same. What can I add to fix that? (same link as above)
Thanks again!
Erik
Solution for this topic
To achieve that please use the below CSS code instead of above shared CSS code.
#page-container #header-navigation .sh-nav .current-menu-item a { height: auto !important; line-height: 24px!important; }Thanks. The spacing is still a little weird, but I can live with it.
I am not sure why, but this made the spacing a little better:
#page-container #header-navigation .sh-nav .current-menu-item a {
line-height: 1.0em !important;
margin-top: 10px;
padding-top: 0px;
}Erik
You are most welcome here 🙂
