- This topic has 9 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hello,
I somehow removed the underline from the selected topic/category on the main menu (at the top) that was there when I first installed the Read template (see Subscribe on the upper right):
I actually reinstalled the template and started from scratch, but that didn’t fix the problem.
What steps should I take to add the underlined to my site’s menu the way it camee installed (hairbasepro.com)?
Thanks!
Customer Support
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-buttonlike 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!
- You must be logged in to reply to this topic.
