I am trying to change the hover colour of oneof the main menu items.
(The site is currently in development but can be viewed with login and password as “guest” @ https://bit.ly/2NAz0Fs
Usually when I hover over any of the main menu items they all have the same coloured underline displayed.
News Forums Buying Guide Device Specifications G’day, guest guest!
I am wanting to have a different colour hover for just one of the menu titles. An example would be “News” having a green underline.
The CSS used for the menu hover is as follows:
.td-header-wrap .black-menu .sf-menu > .current-menu-item > a, .td-header-wrap .black-menu .sf-menu > .current-menu-ancestor > a, .td-header-wrap .black-menu .sf-menu > .current-category-ancestor > a, .td-header-wrap .black-menu .sf-menu > li > a:hover, .td-header-wrap .black-menu .sf-menu > .sfHover > a, .td-header-style-12 .td-header-menu-wrap-full, .sf-menu > .current-menu-item > a::after, .sf-menu > .current-menu-ancestor > a::after, .sf-menu > .current-category-ancestor > a::after, .sf-menu > li:hover > a::after, .sf-menu > .sfHover > a::after, .td-header-style-12 .td-affix, .header-search-wrap .td-drop-down-search::after, .header-search-wrap .td-drop-down-search .btn:hover, input[type=submit]:hover, .td-read-more a, .td-post-category:hover, .td-grid-style-1.td-hover-1 .td-big-grid-post:hover .td-post-category, .td-grid-style-5.td-hover-1 .td-big-grid-post:hover .td-post-category, .td_top_authors .td-active .td-author-post-count, .td_top_authors .td-active .td-author-comments-count, .td_top_authors .td_mod_wrap:hover .td-author-post-count, .td_top_authors .td_mod_wrap:hover .td-author-comments-count, .td-404-sub-sub-title a:hover, .td-search-form-widget .wpb_button:hover, .td-rating-bar-wrap div, .td_category_template_3 .td-current-sub-category, .dropcap, .td_wrapper_video_playlist .td_video_controls_playlist_wrapper, .wpb_default, .wpb_default:hover, .td-left-smart-list:hover, .td-right-smart-list:hover, .woocommerce-checkout .woocommerce input.button:hover, .woocommerce-page .woocommerce a.button:hover, .woocommerce-account div.woocommerce .button:hover, #bbpress-forums button:hover, .bbp_widget_login .button:hover, .td-footer-wrapper .td-post-category, .td-footer-wrapper .widget_product_search input[type='submit']:hover, .woocommerce .product a.button:hover, .woocommerce .product #respond input#submit:hover, .woocommerce .checkout input#place_order:hover, .woocommerce .woocommerce.widget .button:hover, .single-product .product .summary .cart .button:hover, .woocommerce-cart .woocommerce table.cart .button:hover, .woocommerce-cart .woocommerce .shipping-calculator-form .button:hover, .td-next-prev-wrap a:hover, .td-load-more-wrap a:hover, .td-post-small-box a:hover, .page-nav .current, :first-child.page-nav > div, .td_category_template_8 .td-category-header .td-category a.td-current-sub-category, .td_category_template_4 .td-category-siblings .td-category a:hover, #bbpress-forums .bbp-pagination .current, #bbpress-forums #bbp-single-user-details #bbp-user-navigation li.current a, .td-theme-slider:hover .slide-meta-cat a, a.vc_btn-black:hover, .td-trending-now-wrapper:hover .td-trending-now-title, .td-scroll-up, .td-smart-list-button:hover, .td-weather-information::before, .td-weather-week::before, .td_block_exchange .td-exchange-header::before, .td_block_big_grid_9.td-grid-style-1 .td-post-category, .td_block_big_grid_9.td-grid-style-5 .td-post-category, .td-grid-style-6.td-hover-1 .td-module-thumb::after, .td-pulldown-syle-2 .td-subcat-dropdown ul::after, .td_block_template_9 .td-block-title::after, .td_block_template_15 .td-block-title::before, div.wpforms-container .wpforms-form div.wpforms-submit-container button[type=submit] {
background-color: #ff6700;
}
Obviously changing the background here would change all the menu items, my goal is to change just a single menu item’s hover colour.
Also, the li class of the “News” item also has a unique reference, which I feel may be useful when changing to the its background hover.
menu-item menu-item-type-taxonomy menu-item-object-category menu-item-first td-menu-item td-mega-menu menu-item-6 news`
I could use either menu-item-6 or news? I’ve tried to come up with a solution myself but can’t quite get it working.
Thanks in advance!!
Brent
Hi,
You could use the unique ID that each menu item has to style them individually. For example the News menu item
– https://www.screencast.com/t/stBTaqz4OOCK
This is the code used in the example, give it a try
.sf-menu > .menu-item-6 > a:after {
background-color: green;
}
Thanks
Thank you so much, worked perfectly. I am honestly grateful for your help.
Best theme ever, cannot be happier!!
Glad it worked and thank you for your appreciation, let us know if you have more questions.
