Jump to content
Sign in to follow this  
purple

Submenu/Navigation

Recommended Posts

purple    0
purple

I have made the nav bar on my site have hover images. However, the problem is that when I implement a submenu it carries the hover images down into the submenu. See an example here: http://www.screencast.com/t/Olqb1zWXt I would like the submenu to be transparent and have no images. Any ideas? This is the code I am using to create the hover:

#menu-main { margin:0 auto;
	width:975px;}
	.main_nav ul li {font-size: 18px;}
	
	.main_nav li a { color: #135A2E !important;}
	.main-nav li.current-page-ancestor a,
	.main-nav li.current_page_item a,
	.main-nav li.current-page-ancestor ul a,
	.main-nav li.current_page_item ul a.sf-menu li li { background-color: #EAE8E6; color: #135A2E;}
	li.menu-item-43 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}
	li.menu-item-42 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;}
	li.menu-item-55 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-large.png'); background-repeat: no-repeat;}
	li.menu-item-44 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;}
	li.menu-item-52 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-med.png'); background-repeat: no-repeat;}
	.main-nav li a:hover,
	.main-nav .current-menu-ancestor .current_page_item a:hover,
	.main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; }
	li.menu-item a:hover {list-style-type:none;
	margin:0;
	padding:20;
	padding-top:15px;
	padding-bottom:30px;
	}

My site is currently on a development server on my desktop. I can try to upload it to a domain if you need to see something more than screen captures. Thx.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
Something like adding a transparent background to the subnav element may work. Have you tried that?

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
purple    0
purple
That worked. Thanks! Now, how would I specify that I want the subnav hover font color to stay the same and not change to white like the main nav? Here is the code I have tried: [code] li.sub-menu a:hover { color: #135A2E !important;}[/code] [code] #sub-menu li a:hover { color: #135A2E !important;}[/code] I have also tried to do it by specifying each individual menu item #. Any ideas?

Share this post


Link to post
Share on other sites
Jenny    33
Jenny
Awesome! :) It's hard to determine exactly what you need to use since your site isn't live, but you could try to add the 'a' element in there (if you want them to use the same color): [code]li.sub-menu a, li.sub-menu a:hover { color: #135A2E !important;}[/code]

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
purple    0
purple
Okay, I finally have had time to sit down and try the above. Unfortunately it didn't work. I have uploaded my website to a sample domain at: [url="http://www.wengermarketinggroup.com/"]http://www.wengermarketinggroup.com/[/url]. The issue I am still having is that when I hover over the subnav area the link color is white. This was necessary in the main menu due to the green hover effect. But on the subnav it makes it so I can't see the text. Also, I would like to get rid of the gray box if possible. Another option I would be okay with if I can't do the other is changing the hover background of the subnav to be the same color of green as the hover effect. Here is my current code: [code]#nav_row { margin:0 auto; width:700px;} .main_nav ul li {font-size: 18px;} .main_nav li a { color: #135A2E !important;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a.sf-menu li li { background-color: #EAE8E6; color: #135A2E;} li.menu-item-43 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-42 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button.png'); background-repeat: no-repeat;} li.menu-item-55 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-large.png'); background-repeat: no-repeat;} li.menu-item-44 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-small.png'); background-repeat: no-repeat;} li.menu-item-181 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/nav-button-med.png'); background-repeat: no-repeat;} li.menu-item-67 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-68 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-69 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-70 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-71 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} li.menu-item-174 a:hover {background-image: url('http://www.paragonpe.dev/wp-content/uploads/2012/05/transparent.png'); background-repeat: no-repeat;} .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #EAE8E6; color: #FFFFFF !important; } li.menu-item a:hover {list-style-type:none; margin:0; padding:20; padding-top:15px; padding-bottom:30px; } li.sub-menu a:hover { color: #135A2E !important;} #brandnav.content-pad { padding-top: 1em; padding-bottom: 1em;} .content-pad { padding: 0px;} [/code]

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, Add this to your custom CSS and see if this does the trick. [code]ul.sf-menu li a:hover { color: purple !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
purple    0
purple
@Danny thanks for the response. Unfortunately that turned all of the links to purple, including the main nav and the dropdown item links on hover. So that still doesn't help me target just the dropdown item links on hover.

Share this post


Link to post
Share on other sites
purple    0
purple
I decided to just go ahead and upload a green background image for the hover as a work around. But if anyone knows how I can still target just the dropdown links on hover I would love to have the knowledge. :-)

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, I have just tested the code below and that is working for me. [code].sub-menu li a:hover { color:pink; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×