Hi!
I want to change style of hover and active links in navigation emnu bar. I use this CSS:
header#top nav ul li a:hover,
header#top nav ul li a:active {
background-color: #FFFFFF !important;
background-color: #244090;
}
but it only works for links that are not active at the moment. If I'm for ex. on Blog page and I hover Blog menu item, background changes but text color remain dark blue. Is there any way to make it work? Am I using a wrong selector path?
There's actually color pickers for this in the admin panel in the header options tab of your Salient Options Panel - just select custom for your color scheme :)
Hey! I have another set of problems with styling nav bar. I used cutom coloring but it messes a lot with active and/or visited links. I tried to fix it with custom css but with no result
Examples:
On start page: When I hover off a menu item that has drop down assigned to it (Blog) - item becomes white for one second (what makes it disappear) and then it becomes visible again
On other pages: Menu item that has drop down assigned to it (Blog) is invisible (white text color) and becomes only visible on hover
Active menu elements are invisible (white), but they sould be grey (set in header custom css)
I set bottom padding for nav menu items to make it look more like pixels but with elements that have drop downs assigned to it I have this issue with too short time of exposition. I have to put my cursor over drop down elements very fast or they will hide. Any fix for that (without deleting padding?)
Custom CSS I added:
header#top nav ul li a:hover { background-color: #244090; padding-bottom: 12px !important; }
You can't set the padding bottom to be different than what it's calculated at because that's how your cursor can remain active in order to reach the submenu. Leaving it how you have it now would require you to move the submenu up further onto the bar instead of being below it so you cursor could reach it before leaving the end of your anchor element.
You would also need to change your snippet to look like this in order to target the states you want with your custom background color: (this will also need to go into a stylesheet itself because of the use of the direct child selector. That won't work in the custom css box)
html body header#top nav > ul > li > a:hover,
html body header#top nav .sf-menu > li.sfHover > a, html body header#top nav .sf-menu > li.current-menu-item > a,
html body header#top nav .sf-menu > li.current_page_item > a .sf-sub-indicator i, html body header#top nav .sf-menu > li.current_page_ancestor > a .sf-sub-indicator i {
background-color: #244090!important;
}
Very sorry for the long delay - wrapping up 3.0 caused a long queue of tickets to build and apparently I overlooked this one. If you could allow me to log into your setup I'd be glad to take care of the issue in your picture for you :)
Unfortunately there's no easy way to make the background color on the itmes go all the way to the top without some custom development and also removing the header reszie effect though.
Sure - i'll let you know exactly what I did and where I did it, however it seems I can't get in pikselowa.com/wp-login.php with those credentials. Can you please confirm that they are correct?
I've logged in and fixed the css for the pages in question - the css I added was tacked onto the mod you already entered into the style.css in the same location :)
Hey Anna!
There's actually color pickers for this in the admin panel in the header options tab of your Salient Options Panel - just select custom for your color scheme :)
Cheers
Hey!
I have another set of problems with styling nav bar. I used cutom coloring but it messes a lot with active and/or visited links. I tried to fix it with custom css but with no result
Examples:
Custom CSS I added:
header#top nav ul li a:hover {
background-color: #244090;
padding-bottom: 12px !important;
}
Hey Anna,
You can't set the padding bottom to be different than what it's calculated at because that's how your cursor can remain active in order to reach the submenu. Leaving it how you have it now would require you to move the submenu up further onto the bar instead of being below it so you cursor could reach it before leaving the end of your anchor element.
You would also need to change your snippet to look like this in order to target the states you want with your custom background color: (this will also need to go into a stylesheet itself because of the use of the direct child selector. That won't work in the custom css box)
html body header#top nav > ul > li > a:hover, html body header#top nav .sf-menu > li.sfHover > a, html body header#top nav .sf-menu > li.current-menu-item > a, html body header#top nav .sf-menu > li.current_page_item > a .sf-sub-indicator i, html body header#top nav .sf-menu > li.current_page_ancestor > a .sf-sub-indicator i { background-color: #244090!important; }Hey Anna!
Very sorry for the long delay - wrapping up 3.0 caused a long queue of tickets to build and apparently I overlooked this one. If you could allow me to log into your setup I'd be glad to take care of the issue in your picture for you :)
Unfortunately there's no easy way to make the background color on the itmes go all the way to the top without some custom development and also removing the header reszie effect though.
Cheers :)
Sure - i'll let you know exactly what I did and where I did it, however it seems I can't get in pikselowa.com/wp-login.php with those credentials. Can you please confirm that they are correct?
Cheers :)
Hey Anna!
I've logged in and fixed the css for the pages in question - the css I added was tacked onto the mod you already entered into the style.css in the same location :)