php file changes for hover/active colour on dropdown navigation WordPress
- SOLVED
Hi,
I need to change my hover and current active colour on a dropdown menu to 5 different colours. I tried specifying css but apparently it's hard-coded in a php file so doesn't take my changes in the css file (that's what the theme developer told me).
the site is www.digitalschools.ie
If you hover your mouse over 'The Five Criteria' and 'Resources' you'll see 5 different colours for each section. This is NOT what I want! I want the hover and current active colour to be each of those colours. The Dropdown menu should be white. I think this is in the header.php possibly in this section?
<?php if($data['primary_color']): ?>
a:hover{
color:<?php echo $data['primary_color']; ?>;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a,
.footer-area ul li a:hover,
.portfolio-tabs li.active a, .faq-tabs li.active a,
.project-content .project-info .project-info-box a:hover,
.about-author .title a,
span.dropcap,.footer-area a:hover,.copyright a:hover,
#sidebar .widget_categories li a:hover,
#main .post h2 a:hover,
#sidebar .widget li a:hover,
#nav ul a:hover,
.date-and-formats .format-box i,
h5.toggle:hover a,
.tooltip-shortcode,.content-box-percentage,
.more a:hover:after,.read-more:hover:after,.pagination-prev:hover:before,.pagination-next:hover:after,
.single-navigation a[rel=prev]:hover:before,.single-navigation a[rel=next]:hover:after,
#sidebar .widget_nav_menu li a:hover:before,#sidebar .widget_categories li a:hover:before,
#sidebar .widget .recentcomments:hover:before,#sidebar .widget_recent_entries li a:hover:before,
#sidebar .widget_archive li a:hover:before,#sidebar .widget_pages li a:hover:before,
#sidebar .widget_links li a:hover:before,.side-nav .arrow:hover:after,.woocommerce-tabs .tabs a:hover .arrow:after,
.star-rating:before,.star-rating span:before,.price ins .amount,
.price > .amount,.woocommerce-pagination .prev:hover:before,.woocommerce-pagination .next:hover:after,
.woocommerce-tabs .tabs li.active a,.woocommerce-tabs .tabs li.active a .arrow:after,
#wrapper .cart-checkout a:hover,#wrapper .cart-checkout a:hover:before,
.widget_shopping_cart_content .total .amount,.widget_layered_nav li a:hover:before,
.widget_product_categories li a:hover:before,#header .my-account-link-active:after,.woocommerce-side-nav li.active a,.woocommerce-side-nav li.active a:after,.my_account_orders .order-number a,.shop_table .product-subtotal .amount,
.cart_totals .total .amount,form.checkout .shop_table tfoot .total .amount,#final-order-details .mini-order-details tr:last-child .amount,.rtl .more a:hover:before,.rtl .read-more:hover:before,#header .my-cart-link-active:after,#wrapper #sidebar .current_page_item > a,#wrapper #sidebar .current-menu-item a,#wrapper #sidebar .current_page_item a:before,#wrapper #sidebar .current-menu-item a:before,#wrapper .footer-area .current_page_item a,#wrapper .footer-area .current-menu-item a,#wrapper .footer-area .current_page_item a:before,#wrapper .footer-area .current-menu-item a:before,.side-nav ul > li.current_page_item > a,.side-nav li.current_page_ancestor > a{
color:<?php echo $data['primary_color']; ?> !important;
}
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a,
#nav ul ul,#nav li.current-menu-ancestor a,
.reading-box,
.portfolio-tabs li.active a, .faq-tabs li.active a,
.tab-holder .tabs li.active a,
.post-content blockquote,
.progress-bar-content,
.pagination .current,
.pagination a.inactive:hover,
#nav ul a:hover,.woocommerce-pagination .current,
.tagcloud a:hover,#header .my-account-link:hover:after,body #header .my-account-link-active:after{
border-color:<?php echo $data['primary_color']; ?> !important;
}
.side-nav li.current_page_item a{
border-right-color:<?php echo $data['primary_color']; ?> !important;
}
.rtl .side-nav li.current_page_item a{
border-left-color:<?php echo $data['primary_color']; ?> !important;
}
.header-v2 .header-social, .header-v3 .header-social, .header-v4 .header-social,.header-v5 .header-social,.header-v2{
border-top-color:<?php echo $data['primary_color']; ?> !important;
}
h5.toggle.active span.arrow,
.post-content ul.circle-yes li:before,
.progress-bar-content,
.pagination .current,
.header-v3 .header-social,.header-v4 .header-social,.header-v5 .header-social,
.date-and-formats .date-box,.table-2 table thead,
.onsale,.woocommerce-pagination .current,
.woocommerce .social-share li a:hover i,
.price_slider_wrapper .ui-slider .ui-slider-range,
.tagcloud a:hover,.cart-loading,
ul.arrow li:before{
background-color:<?php echo $data['primary_color']; ?> !important;
}
<?php endif; ?>
Answers (3)
zebra webdesigns answers:
Use the following CSS in your CSS file.
This will override all the submenu css. If you want to fix this in the file level
Send PM to me
Have a good day
.sub-menu .submenu-green,.sub-menu .submenu-orange ,.sub-menu .submenu-red ,.sub-menu .submenu-blue,.sub-menu .submenu-yellow {
background-color: #fff !important;
}
#wrapper #nav ul li ul li.submenu-green a:hover, #wrapper #nav ul li ul li.submenu-green.current-menu-item a:hover{
background-color: #9CD05A !important;
}
#wrapper #nav ul li ul li.submenu-orange a:hover, #wrapper #nav ul li ul li.submenu-orange.current-menu-item a:hover{
background-color: #FDB652 !important;
}
#wrapper #nav ul li ul li.submenu-red a:hover, #wrapper #nav ul li ul li.submenu-red.current-menu-item a:hover{
background-color: #FF5A55 !important;
}
#wrapper #nav ul li ul li.submenu-blue a:hover, #wrapper #nav ul li ul li.submenu-blue.current-menu-item a:hover{
background-color: #5CC2F0 !important;
}
#wrapper #nav ul li ul li.submenu-yellow a:hover, #wrapper #nav ul li ul li.submenu-yellow.current-menu-item a:hover{
background-color: #FFF67D !important;
}
small modification in the above code
.sub-menu .submenu-green,.sub-menu .submenu-orange ,.sub-menu .submenu-red ,.sub-menu .submenu-blue,.sub-menu .submenu-yellow {
background-color: #fff !important;
}
#wrapper #nav ul li ul li.submenu-green a:hover, #wrapper #nav ul li ul li.submenu-green.current-menu-item a{
background-color: #9CD05A !important;
}
#wrapper #nav ul li ul li.submenu-orange a:hover, #wrapper #nav ul li ul li.submenu-orange.current-menu-item a{
background-color: #FDB652 !important;
}
#wrapper #nav ul li ul li.submenu-red a:hover, #wrapper #nav ul li ul li.submenu-red.current-menu-item a{
background-color: #FF5A55 !important;
}
#wrapper #nav ul li ul li.submenu-blue a:hover, #wrapper #nav ul li ul li.submenu-blue.current-menu-item a{
background-color: #5CC2F0 !important;
}
#wrapper #nav ul li ul li.submenu-yellow a:hover, #wrapper #nav ul li ul li.submenu-yellow.current-menu-item a{
background-color: #FFF67D !important;
}
zebra webdesigns comments:
Add the above code in the end of all.css file
http://testwordpress.scoilnet.ie/wordpress/wp-content/themes/Avada/css/all.css
Your site is loading from an IFRAME
so you have to add this in the original location
zebra webdesigns comments:
The best practice to edit the css is create a child theme and do this stuff. so that you wont loss the files when you upgrade the theme with latest version
Have a great day
If you need help
Send PM
or contact me through
skype id: bhuvan530531
mail id: [email protected]
Ailsa Craig comments:
Perfect Zebra Webdesigns - thank you so much...worked a treat!
Ailsa Craig comments:
Yes it's in a child theme...have been down the road of editing the main theme...not a nice experience when you upgrade!!
Thanks again!
Arnav Joy answers:
please check your admin panel , i think you will get it there , any setting may be?
Balanean Corneliu answers:
You dont have the color set in header.php the color is in you css but you need to pickup diferently.
For nav hover you have set white now:
in css is set:
#nav ul li ul li a:hover,
background-color: #FFFFFF !Important;
I think your template have for each type of page or order destinated a color.
Can you give us your css to take a look.
Ailsa Craig comments:
Hi,
Within the Theme options I have ability to specifiy css so this is what I put in
.submenu-green {
background-color: #9cd05a !important;
}
.submenu-green ul li ul li a:hover {
background-color: #9cd05a !important;
}
I realise the background-color on the first item should be set to #ffffff (i just specified green for clarity purposes on the website as the hover colour below wasn't being shown)
I set a class submenu-green in the admin panel under 'menu' where you can assign a class to your dropdown.
thanks.
