Using custom CSS for individual menu items.
Hello. I have a menu and the last item is a link. I want to add enphasis in this menu item with a different style (color, border, etc).
A similar effect can be found in Coaching demo, with a red "sign up" item and custom CSS (pasted in the end for completeness).
I also found here in the forum we can use "Screen Options" and under "Advanced Menu Properties" enable "CSS Class" so we have an extra CSS field for each menu item. This was done, but I don't know how to go further because I don't know how to create such CSS and use it in the new CSS menu field. Can you help with this?
The CSS menu sample in the Coaching was difficult to understand and maybe you can help, I would appreciate some documentation so I can increase my expertise with Be Theme.
##### Custom CSS code from coaching demo for menu items:
.menu-highlight #Top_bar .menu > li.current-menu-item > a, .menu-highlight #Top_bar .menu > li.current_page_item > a, .menu-highlight #Top_bar .menu > li.current-menu-ancestor > a, .menu-highlight #Top_bar .menu > li.current_page_ancestor > a, .menu-highlight #Top_bar .menu > li.hover > a { color: #171717; }
.menu-highlight:not(.header-creative) #Top_bar .menu > li > a { border-radius: 20px; }
@media only screen and (max-width: 767px) {
.mobile-tb-left #Top_bar .top_bar_right .top_bar_right_wrapper {
text-align: center;
width: 100%;
}
#Top_bar a.button.action_button { margin-right: 0; }
}
Comments
if you want to write custom css for the last menu item, you must do this under Theme options > Custom CSS & JS > Custom CSS section. We recommend to look first on http://themes.muffingroup.com/betheme/documentation/#theme-customizations where we explained how to do this.
Thanks!