Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Remove menu background graphic on drop down menu area (http://forum.bytesforall.com/showthread.php?t=18038)

blueprairie Jul 24, 2012 10:09 AM

Remove menu background graphic on drop down menu area
 
Hi there!

I have a sub-menu that isn't displaying well. Can you take a peek at http://eolhealth.server308.com/ and let me know if there is a way to remove the menu background graphic from the drop-down menu area (I just want a bgcolor there)? And then for items 2 and beyond there is no background at all. The only menu with sub-pages is "Frankly Speaking."

Thank you!
-Kimberly

juggledad Jul 24, 2012 04:14 PM

you need to reset the image and color for the submenu. try this (you will want to change the colors
HTML Code:

div#menu1 ul.rMenu li ul {
background-image: none !important;
background-color: #ff0099 !important;
}

div#menu1 ul.rMenu li ul li {
background-image: none;
background-color: #ff0099 !important;
}


zingo5 Jul 31, 2012 01:39 PM

I used the above code to make my drop down items a light blue. When I highlight them everything works fine they turn dark blue as desired. However I have it set so the menu item for the current page displays as dark blue.

If you hover over the menu item of the current page the whole drop down menu opens in dark blue when the children should be light blue.

Ex. If you go here and hover the mouse over 'First Steps' everything is correct.

If you go to this page and hover the mouse over 'First Steps' the whole drop down menu opens in dark blue instead of light blue.

juggledad Jul 31, 2012 01:58 PM

css can get very complicated and menu CSS espically so. The CSS for the menu has over 400 lines.

in your case when you click on 'First Steps' it gets the class of 'current_page_item'.

remember CSS has an order of precidence and if there are two CSS Selectors that could apply to the same code, the one that is more specific would apply AND since CSS cascades the rules apply to the child elements also.

so you need to reset the color for items that are subsequent when it has the class 'current_page_item'

zingo5 Jul 31, 2012 02:26 PM

Wow I'm impressed that you could understand my post and write an answer I could understand within 15 minutes. I am assuming that the css inserts in the theme options take priority over everything except css within a page so I added this at the end of the css inserts but it didn't work.

div#menu1 ul.rMenu li.current_page_item li ul{
background-image: none !important;
background-color: #c6d5ea!important;
}


div#menu1 ul.rMenu li.current_page_item li ul li{
background-image: none !important;
background-color: #c6d5ea!important;
}

juggledad Jul 31, 2012 02:42 PM

try this
HTML Code:

div#menu1 ul.rMenu li.current_page_item ul li a:link,
div#menu1 ul.rMenu li.current_page_item ul li a:active,
div#menu1 ul.rMenu li.current_page_item ul li a:hover,
div#menu1 ul.rMenu li.current_page_item ul li a:visited,
div#menu1 ul.rMenu li ul li a:hover {
    background-color: #c6d5ea;
    color: #000000;
}


zingo5 Jul 31, 2012 02:58 PM

That makes the drop down list of the current page light blue again, but it prevents you from selecting an item in it and making that item dark blue when you hover the mouse over it.

juggledad Jul 31, 2012 03:10 PM

move the hover out to its own css
HTML Code:

div#menu1 ul.rMenu li.current_page_item ul li a:link,
div#menu1 ul.rMenu li.current_page_item ul li a:active,
div#menu1 ul.rMenu li.current_page_item ul li a:visited,
div#menu1 ul.rMenu li ul li a:hover {
    background-color: #c6d5ea;
    color: #777777;
}
div#menu1 ul.rMenu li.current_page_item ul li a:hover {
    background-color: #c6d5ea;
    color: #000000;
}


zingo5 Jul 31, 2012 04:28 PM

Almost. I changed the last color in your code to #5A85C1

The menu now works properly if you are on the First Steps Page

but the dropdown list won't change color on hover if you are on any other page. You are right menu css can get a lot more involved than I thought!


All times are GMT -6. The time now is 12:06 AM.

Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.