-
Posts
-
I have in Admin set the orange, white and grey colors used on site but i am unable to change top menu colors:
http://suiciderescue.se/wordpress/
I want Links to be white and upon click black will indicate what page user is on.
the submenu must be orange with white text on and when mouse over the sub menu
it´s BG can be white as today, but then text should be orange.
I did try to follow the video you great guys here at support posted but was unable to get changes done :(
Please assist and you will make my day!
Thanks
Hi,
Please add this on your custom.css to change the menu color
.main_menu a {
color: white !important;
}To change the active page color, use this
.current-menu-item > a {
color: black !important;
}For the submenu hover, you can use this
.header_color .main_menu .menu ul li a:hover {
background-color: white;
color: orange !important;
}Regards,
Ismael
Thanks Ismael !
– You made my day and we are now one step closer to launch our new organisations official website :D
May I ask how to make the original arrow to be seen for selcted page or so that it more clerer for visitor what page they are mouse over-ing?
i tried this code:
}
.avia-menu-fx .avia-arrow-wrap {
height: 15px;
width: 10px;
position: absolute;
top: -15px;
left: 50%;
margin-left: -5px;
overflow: hidden;
display: none;
}
what would you have done if it was your site, to make arrow or something else make it more clear to visitor what page they are on?
Thanks
Hi,
I will probably do this.
.current-menu-item > a .avia-menu-fx {
background: black;
}
.current-menu-item > a .avia-menu-fx .avia-arrow-wrap .avia-arrow {
background: black !important;
border-color: black;
}
.avia-menu-fx {
bottom: 0;
}This will make the arrow black on the current page.
Regards,
Ismael
Thanks, but the arrow i see now as white..hmm.
This is my entire css changes as per your recommentation:
.main_menu a {
color: white !important;
}
.current-menu-item > a {
color: black !important;
}
.header_color .main_menu .menu ul li a:hover {
background-color: white;
color: orange !important;
.current-menu-item > a .avia-menu-fx {
background: black;
}
.current-menu-item > a .avia-menu-fx .avia-arrow-wrap .avia-arrow {
background: black !important;
border-color: black;
}
.avia-menu-fx {
bottom: 0;
}
did i do anything wrong perhaps? If css on FTP has been modified i can replace with default if you tell me what file to replace with original :)
Thank you Ismael, you are a talended and nice guy, appreciate it!
Hi,
You removed something. Please use this instead.
.main_menu a {
color: white !important;
}
.current-menu-item > a {
color: black !important;
}
.header_color .main_menu .menu ul li a:hover {
background-color: white;
color: orange !important;
}
.current-menu-item > a .avia-menu-fx {
background: black;
}
.current-menu-item > a .avia-menu-fx .avia-arrow-wrap .avia-arrow {
background: black !important;
border-color: black;
}
.avia-menu-fx {
bottom: 0;
}Enjoy the theme. :)
Cheers,
Ismael
- The topic ‘Change Top Menu Colors’ is closed to new replies.