Wordpress Menu Colors and Classes WordPress
- SOLVED
We need some help with getting our Menu right.
We are using the Wordpress Menu function.
The top Navigation when on that parent menu option, the background will be the colour, displayed in screenshot-1.jpg
(https://www.dropbox.com/s/w93tkmw3ijx8h5t/screenshot-1.jpg)
For the Sub-Navigation items for Rollover we would like to have the text change to the Parent colour.
For the Sub-Navigation items when active we would like the text to be the colour of the Parent colour.
Please see screenshot-2.jpg
(https://www.dropbox.com/s/mp9beyr6qeyl2g7/screenshot-2.jpg)
Link to the project can be found in screenshot-1.jpg
(https://www.dropbox.com/s/w93tkmw3ijx8h5t/screenshot-1.jpg)
Many Thanks
Answers (3)
Abdelhadi Touil answers:
Hi. As I see you are using superfish menu, and I think it'll be easier to make change directly on website, so I'll need FTP login if you want.
Good luck.
Abdelhadi Touil comments:
Before pm me your FTP login information, please go to your superfish.css file in themes/camdenlock/stylesheets/ folder, and add these styles at the end of the file:
.gettingheremenu a:hover {
background: #103993;
color: #fff;
}
.shopsmenu a:hover {
background: #ED2375;
color: #fff;
}
.fooddrinkmenu a:hover {
background: #7AC043;
color: #fff;
}
.musicmenu a:hover {
background: #F89828;
color: #fff;
}
Hope this work for you :)
Abdelhadi Touil comments:
Sorry I'v forgot the TRADERS menu, so add this code rather than the other one:
.gettingheremenu a:hover {
background: #103993;
color: #fff;
}
.shopsmenu a:hover {
background: #ED2375;
color: #fff;
}
.fooddrinkmenu a:hover {
background: #7AC043;
color: #fff;
}
.musicmenu a:hover {
background: #F89828;
color: #fff;
}
.tradersmenu a:hover {
background: #F89828;
color: #fff;
}
Daniel Yoen answers:
Page not found
:-)
yepyeh comments:
which page is not found?
Daniel Yoen comments:
http://www.popcorndesign.co.uk/sites/camdenlock/
:-)
yepyeh comments:
Please check the url in screenshot-1.jpg
thanks
Daniel Yoen comments:
For css, will be very difficult if working off-site. :-)
Add parent class :
add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {
$parents = array();
foreach ( $items as $item ) {
if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'menu-parent';
}
}
return $items;
}
idt answers:
Your CSS will be something like this:
/* For home */
li#menu-item-348.current-menu-item a,
li#menu-item-348 a:hover{
background-color: #ed2375; /* Change to what you want */
color: #fff; /* Change to what you want */
}
li#menu-item-348. ul.sub-menu li.current-menu-item a{
color: #ed2375; /* Change to what you want */
}
li.gettingheremenu.current-menu-item a,
li.gettingheremenu a:hover{
background-color: #103993; /* Change to what you want */
color: #fff; /* Change to what you want */
}
li.gettingheremenu ul.sub-menu li.current-menu-item a{
color: #103993; /* Change to what you want */
}
li.fooddrinkmenu.current-menu-item a,
li.fooddrinkmenu a:hover{
background-color: #7ac043; /* Change to what you want */
color: #fff; /* Change to what you want */
}
li.fooddrinkmenu ul.sub-menu li.current-menu-item a{
color: #7ac043;
}
li.musicmenu.current-menu-item a,
li.musicmenu a:hover{
background-color: #f89828; /* Change to what you want */
color: #fff; /* Change to what you want */
}
li.musicmenu ul.sub-menu li.current-menu-item a{
color: #f89828;
}
li.tradersmenu.current-menu-item a,
li.tradersmenu a:hover{
background-color: #009ddc; /* Change to what you want */
color: #fff; /* Change to what you want */
}
li."tradersmenu ul.sub-menu li.current-menu-item a{
color: #009ddc;
}
ul.sub-menu li.current-menu-item a, ul.sub-menu li.current-menu-item a:hover {
background-color: #000 !important; /* if you want background color for active subnav to be black */
}
Do the same to the rest of the menu.