Jump to content
Sign in to follow this  
pforeman

Menu CSS help

Recommended Posts

pforeman

Hi, Just found a small issue with my css for my menu and it's bugging me! All the correct menu colours etc work except for the news section. For example go to the news page and the text in the menu is blue but when you go to a news post it's white and I can't figure it out. Any help would be greatly appreciated. Cheers Pete

/* NAV BACKGROUND AND BORDER UNDER NAV */
	.navigation_wrap {
	font-size: large;
	background-image:url('http://mindwp.users36.interdns.co.uk/wp-content/uploads/bg_menu.jpg') !important;
	}
	/* What gives our menus style */
	.menu-bottom-shadow{
		background: url(images/sprite_h.png) left top repeat-x #eee;
		height: 3px;
		width: 100%;
	}
	#nav .menu li:hover{
		position: static;
	}
	#nav .menu ul {
		box-shadow: 0 1px 2px #000000;
	}
	
	/* Top level header menu, default state */
	
	#menu-mindmenu-wrap {
		position: relative;
		background: url(images/sprite_h.png) left -3px repeat-x #101010;
		z-index: 1000;
	}
	#menu-mindmenu,
	#secondary-menu {
		margin: 0 10px;
	}
	#menu-mindmenu > li {
		font: normal 14px arial;
		margin: 0 0 0 15px;
	}
	#menu-mindmenu > li:first-child {
		margin-left: 0;
	}
	#menu-mindmenu > li > a {
		color: #fff;
		line-height: 16px;
		padding: 9px 10px 10px;
	}
	#menu-mindmenu > li > a > span {
		display: block;
		font-size: 11px;
		color: #aaa;
	}
	#menu-mindmenu > li.menu-item-ancestor > a {
		background: url(images/sprite_master.png) -877px -236px no-repeat transparent;
		padding-left: 26px;
	}
	
	/* Top level header menu, hover and current state */
	#menu-mindmenu > li:hover,
	#menu-mindmenu > li.current-menu-item,
	#menu-mindmenu > li.current-menu-ancestor {
		background: url(images/sprite_h.png) left -300px repeat-x #000000;
	}
	#menu-mindmenu > li:hover > a,
	#menu-mindmenu > li.current-menu-item > a,
	#menu-mindmenu > li.current-menu-ancestor > a {
		color: #00aded;
	}
	#menu-mindmenu > li:hover > a > span,
	#menu-mindmenu > li.current-menu-item > a > span,
	#menu-mindmenu > li.current-menu-ancestor > a > span {
		color: #484848;
	}
	#menu-mindmenu > li.menu-item-ancestor:hover > a,
	#menu-mindmenu > li.current-menu-item > a,
	#menu-mindmenu > li.current-menu-ancestor > a {
		background-position: -877px -192px;
	}
	
	/* Sub level header menu, default state */
	#menu-mindmenu ul li a {
		color: #000;
		padding: 10px;
		width: 180px;
	}
	#menu-mindmenu ul li {
		background: url(images/sprite_h.png) left -777px repeat-x #dfdfdf;
	}
	#menu-mindmenu ul li.menu-item-ancestor > a {
		background: url(images/sprite_master.png) -652px -194px no-repeat transparent;
		padding-right: 25px;
		width: 165px;
	}
	
	/* Sub level header menu, hover and current state */
	#menu-mindmenu ul li:hover,
	#menu-mindmenu ul li.current-menu-item,
	#menu-mindmenu ul li.current-menu-ancestor {
		background-position: left -856px;
		background-color: #212121;
	}
	#menu-mindmenu ul li:hover > a,
	#menu-mindmenu ul li.current-menu-item > a,
	#menu-mindmenu ul li.current-menu-ancestor > a {
		color: #00aded;
	}
	#menu-mindmenu ul li.menu-item-ancestor:hover > a,
	#menu-mindmenu ul li.current-menu-item > a,
	#menu-mindmenu ul li.current-menu-ancestor > a {
		background-position: -652px -238px;
	}
	

Share this post


Link to post
Share on other sites
Rob
I'm unsure why your menu is doing that with the news category posts but yes, it's doing it. Somewhere along the line the CSS is changing. Apparently, the custom menu isn't being applied to each post as they're created but is applied to pages. I'm not a CSS expert and since this appears to be a customized menu, you may need one of our Pros. One of our moderators with great CSS skills will be on tomorrow morning. I'll ask him to take a look at your code.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Danny
Hi, Try adding this: [code].main-nav .current-page-ancestor .current_page_item a {color: rgba(0, 173, 237, 0.8) !important;}[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pforeman
Hi Rangelone, That would be great if they could thanks. Hi Danny, Sorry that did not work. Pete

Share this post


Link to post
Share on other sites
Danny
Hi Pete, hehe after a few hours of trial and error, I think I figured it out. Replace: [code]#menu-mindmenu > li:hover > a, #menu-mindmenu > li.current-menu-item > a, #menu-mindmenu > li.current-menu-ancestor > a { color: #00aded; }[/code] With this: [code]#menu-mindmenu > li:hover > a, #menu-mindmenu > li.current-menu-item > a, #menu-mindmenu > li.current-menu-ancestor > a, #menu-mindmenu > li.current_page_item > a, #menu-mindmenu > li.current_page_parent > a { color: #00aded; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pforeman
Danny you are an absolute star!!! I spent hours on this as well so THANK YOU so much. So pleased. :) Cheers Pete

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  

×