Restore or recreate original Read template main menu selected category underline

Hi Jacob,

I don't think there's an underline there by default. To clarify, are you looking for something like this?: https://share.getcloudapp.com/WnuZYPXd

If so, try adding this through Appearance > Customize > Additional CSS:

div#primary-menu > ul > li.current-menu-item  {
    box-shadow: 0px -8px 0px var(--accent) inset;
}

Thanks for the quick reply!

Yes, that image is correct.

I see about 63 lines of code though - where would I add what you provided?

You can add it actually anywhere, but to be safe and not ruin other codes, add it at the very bottom.

I actually figured it out, but have a related question.

In the CSS, I see the following label and code:

/* navigation subscribe underline */

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a {
	box-shadow: 0px -8px 0px var(--accent) inset;
	transition: all 0.6s ease 0s;
	padding: 0px;
	margin: 0px 20px
}

.main-navigation:not(.slideout-navigation) .main-nav li.subscribe-button a:hover {
	box-shadow: 0px -16px 0px var(--accent) inset;
}

I added a subscribe option to the menu, but it doesn't have the underline from your screenshot. Should it?

That's just for a single button with the class subscribe-button. Are you wanting to apply the underline one button or for the "current" button selected?

I tried it with the code you provided but didn't like it, and would rather just have an underlined subscribe-button like the default template. How do I accomplish that?

If you want it statically, you can go to Appearance > Menus, and then click on Screen Options. Then, enable CSS Classes. Example: https://share.getcloudapp.com/d5uy1dZp

Afterward, add that class to a Menu Item. Example: https://share.getcloudapp.com/12uRAZwA

If you want a different behavior, let us know.

Perfect - thank you!

You're welcome, Jacob!