WordPress › Support » Eclipse theme: .current_page_item does not work for Home in navigation

Cebetyr
Member
Posted 6 months ago #

Have designed a navigation that renders a red background for the current page in the navigation.

For some reasons this works for all pages but the very first page "Home". I cannot see why since as far as I can see has the same mark-up as the other pages in the navigation menu.

As home is the first page you come to when surfing to the page, the red background should be seen at first sight as well, which it doesn't.

Would very much appreciate your help.

Best regards,
Cecilia

/*
----------------------------------------------------------------
Nav
----------------------------------------------------------------
*/

#nav {
    float: right;
    margin-top: 0px;  /* CB 121011: Ändrar från 32px; */
    position: relative;
}

#nav ul {
	list-style: none;
	margin: 0;
}
#nav li {
	position: relative;
	}

#nav li a {			/* Bas för samtliga li (under- som huvudnivå) */
	display: block;
	padding: 0px 0px;   /* CB 121011: Ändrar från padding: 5px 10px; */
	font-weight: 500;	/* CB 121011: Ändrar från 400; */
	text-decoration:none;
	/* CB 121012: Lägger till: */
		font-family: helvetica, "helvetica narrow", sans-serif;
		/* CB 121012: Testar att lägga till: text-transform: uppercase; men döljer tills vidare. */
	color: #19171c; /* CB 121011: Ändrar från color: whitesmoke; */

	/* CB 121122: Lägger till och döljer sedan igen för att både current och hover får samma röda bakgrundsfärg samtidigt + att undermenyn får samma höjd: 

	width: 130px;
	height: 130px; */
}

#nav_menu > li {                /* Yttre boxen och huvudnivå */
    float: left;
    margin: 0px 0 0 0;   /* CB 121011: Ändrar från margin: 0 13px; */

	/* CB 121011: Lägger till: */

		width: 130px;
		height: 130px;
		/* border-right: 1px solid #DDDDDD; */
		text-align: center;
		}

	/* CB 121011: Lägger till: (så att sida som visas får röd bakgrund - hover får bli vit bg med röd text) */ 

		#nav #nav_menu > .current_page_item  {            

		background: none repeat scroll 0 0 #e41819;
		color: #ffffff;
		} 

		/* CB 121122: Lägger till: */

			#nav #nav_menu > .current_page_item:first-child  {            

			background: none repeat scroll 0 0 #e41819;
			color: #ffffff;
			} 

		/* CB 121122: Lägger till: (På active sida ska texten vara vit mot röd bakgrund.
				Detta gör dock att de länkar i huvudmenyn med undernivåer blir vita mot vit bakgrund i aktivt läge. */

			#nav #nav_menu > .current_page_item > a:hover {
   			color: #fff !important;  /* CB 121122: Ändrar från #FFFFFF */
			} 

		/* CB 121122: Lägger till: */

			#nav #nav_menu > .current_page_item > a:active:hover {
   			color: #19171c !important;  /* CB 121122: Ändrar från #FFFFFF */
			} 

#nav #nav_menu > li > .sub-menu {
    display: none;
	background: #dddddd;   	/* CB 121011: Ändrar från background: rgba(35,35,35,0.75) none;  */
   	margin-top: 120px;	/* CB 121011: Ändrar från margin-top: 5px;  */
    padding: 30px 20px 30px;	/* CB 121011: Ändrar från padding: 8px 10px 5px; */
    position: absolute;
    left: 0;
    top: 10px;			/* CB 121011: Ändrar från top: 25px; */
    float: left;
    width: 160px; 		/* CB 121011: Ändrar från width: 200px; */
    z-index: 9999;

		/* CB 121011: Lägger till: */

			text-align: left;
			color: #19171c; 

				/* CB 121011: Döljer:

		    			border-radius: 0 3px 3px 3px;
						-moz-border-radius: 0 3px 3px 3px;
						-webkit-border-radius: 0 3px 3px 3px;
					        -khtml-border-radius: 0 3px 3px 3px; */
						}

		/* CB 121011: Lägger till: */

			#nav #nav_menu > li > .sub-menu > a:hover {
			color: #FFF;
			}

		/* CB 121011: Lägger till: */

			#nav #nav_menu > li > .sub-menu > .current_page_item > a {
			color: #fff;
			background: #dddddd;	!important;
			font-size: 14px;
			}

/* CB 121013: Döljer: 

	#nav #nav_menu > li .main_nav_arrow {
  	  background: url(../images/down-arrow.png) no-repeat center center;
 	   height: 5px;
 	   width: 8px;
 	   display: inline-block;
 	   position: relative;
 	   margin: 0 10px 0 10px;
 	   top: -1px;
	}

	#nav #nav_menu > li > .sub-menu .nav_arrow {
	    background: url(../images/nav_arrow.png);
	    height: 11px;
	    left: 10px;
	    position: absolute;
	    top: -10px;
 	   width: 14px;
 	   display: none;
	}

*/

#nav #nav_menu > li > .children {
     display: none;
	background: #dddddd; /* CB 121011: Ändrar från background: rgba(35,35,35,0.75) none; */
   	margin-top: 5px;
    padding: 30px 10px 30px 5px;   /* CB 121011: Ändrar från padding: 8px 10px 5px;  */
    position: absolute;
    left: 0;
    top: 25px;
    float: left;
    width: 200px;
    z-index: 9999;

		/* CB 121011: Döljer: 

    			border-radius: 0 3px 3px 3px;
				-moz-border-radius: 0 3px 3px 3px;
    				-webkit-border-radius: 0 3px 3px 3px;
   				 -khtml-border-radius: 0 3px 3px 3px; */

}

#nav #nav_menu > li > .children .nav_arrow {
    background: url(../images/nav_arrow.png);
    height: 11px;
    left: 10px;
    position: absolute;
    top: -10px;
    width: 14px;
    display: none;
}

#nav #nav_menu > li > a {
	color: #19171c;		/* CB 121011: Ändrar från color: #b3b3b3;	 */
    display: inline-block;
    font-size: 14px;		 /* CB 121011: Ändrar från 16px; */
    line-height: 20px;
    cursor: pointer;
    padding: 100px 5px 5px 5px; /* CB 121011: Ändrar från padding: 5px 0px 5px 10px; */
    position: relative;
}

/* #nav #nav_menu > .current_page_item > a {
	 CB 121011: Ändrar från:
		color: #FFF;
				till: 

	background: none repeat scroll 0 0 #e41819;
	color: #fff;
	} */

#nav #nav_menu > li:hover > a {
	color: #e41819; 		/* CB 121011: Ändrar från #FFF; */ /* CB 121122: Ändrar från #e41819; */
	background: transparent;				   /* CB 121122: Ändrar från transparent; */
	padding: 100px 0px 30px 0px; 	/* CB 121011: Ändrar från padding: 5px 0px 5px 10px; */ /* CB 121122: Ändrar från 100px 5px 5px 5px; */
					/* CB 121122: Ändrar från padding: 100px 0px 0px 0px; */
	font-weight: 400; 		/* CB 121011: Ändrar från 500; */

	/* CB 121122: Lägger till: */

	weight: 130px;
	}

	/* CB 121011: Lägger till: */

		#nav #nav_menu > .dropdown_hover .current_page_item > a {
	 	background: none repeat scroll 0 0 #e41819;
		color: #fff;
		} 

#nav #nav_menu > .dropdown_hover:hover > a {
	color: #e41819;					/* CB 121011: Ändrar från #b3b3b3; */ /* CB 121122: Ändrar från #e41819; */
	background: #fff;	/* CB 121011: Ändrar från background: rgba(35,35,35,0.75) none; */ /* CB 121122: Ändrar från #fff; */ 

	padding: 100px 0px 30px 0px;	/* CB 121011: Ändrar från padding: 5px 0px 5px 10px; */ /* CB 121122: Ändrar från 100px 0 0 0;
	font-weight: 500;		/* CB 121011: Ändrar från font-weight: 500; */

		/* CB 121122: Lägger till: */

		width: 130px;

		/* CB 121011: Döljer: 

		border-radius: 3px 3px 0 0;
		-moz-border-radius: 3px 3px 0 0;
   	 	-webkit-border-radius: 3px 3px 0 0;
   	 	-khtml-border-radius: 3px 3px 0 0; 	*/
	}

	/* CB 121011: Lägger till: */

		#nav #nav_menu > .dropdown_hover:active > a {
		color: #e41819;					/* CB 121011: Ändrar från #b3b3b3; */       /* CB 121122: Ändrar från #e41819; */
		background: #fff;	/* CB 121011: Ändrar från background: rgba(35,35,35,0.75) none; */ /* CB 121122: Ändrar från #fff */

		/* padding: 100px 0px 0px 0px;	 CB 121011: Ändrar från padding: 5px 0px 5px 10px; */
		font-weight: 400;		/* CB 121011: Ändrar från font-weight: 500; */

		/* CB 121122: Lägger till: */

		width: 130px;

	/* CB 121011: Döljer: 

		border-radius: 3px 3px 0 0;
		-moz-border-radius: 3px 3px 0 0;
   	 	-webkit-border-radius: 3px 3px 0 0;
   	 	-khtml-border-radius: 3px 3px 0 0; 	*/
}

#nav #nav_menu li:hover > ul {
	display: block;

	}

#nav .sub-menu a {			/* CB 121011: Ändrar från #nav ul ul a { */
	color: #19171c; 	/* CB 121011: Ändrar från #B3B3B3; */
	font-size: 13px;
			/* CB 121011: Döljer:
				 border-bottom: 1px solid #3D3D3D; */

			/* CB 121011: Lägger till: */

	border: 0;
	padding: auto auto 30px;
	}

#nav .parent-menu {
	background: url(../images/down-menu-arrow.png) no-repeat right center;
}
#nav .parent-menu:hover {
	background: url(../images/down-menu-arrow-hover.png) no-repeat right center;
}
#nav ul ul ul a {
	background: url(../images/indent-menu-arrow.png) no-repeat left center;
}
#nav ul ul ul a:hover {
	background: url(../images/indent-menu-arrow-hover.png) no-repeat left center;
}
#nav ul ul ul a {
	text-indent: 10px;
}
#nav ul ul ul ul a {
	text-indent: 20px;
}
#nav ul ul ul ul ul a {
	text-indent: 30px;
}

alchymyth
The Sweeper & Moderator
Posted 6 months ago #

what function or code are you using for the nav menu?

Cebetyr
Member
Posted 6 months ago #

The code can be seen in at the bottom of the above entry. What function is more difficult to tell: Can you see which from the following extract:

<div id="nav">
<div class="menu-global-meny-container">
<ul id="nav_menu">
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25">
<a href="/index.php">Hem</a>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 dropdown_hover">
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">
<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321 dropdown_hover">
</ul>
</div>
</div>

Cebetyr
Member
Posted 6 months ago #

I actually have another problem related to the menu and the current page.

When a page with a submenu is current the link text to the page in the main menu gets white and can not be seen in the menu. I have tried to alter this, but I think the problem is connected with the submenu and have not succeeded in fixing this.

It's the "current page" thing that I cannot really see what code makes what.

So if you have a chance to look at this it would by highly appreciated.

The link to the website is interim.commsec.se.

Many thanks!
Cecilia

alchymyth
The Sweeper & Moderator
Posted 6 months ago #

your menu is created with the wp-nav_manu() function:

http://codex.wordpress.org/Function_Reference/wp_nav_menu
http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

the problem is that your home menu item is setup as a custom link (with relative url); it therefore does not get a .current-menu-item class

for details, as you seem to be working with the 'eclipse pro' theme by cyberchimps, please contact them for support;
commercial themes are not supported by this forum.

Cebetyr
Member
Posted 6 months ago #

Great, thanks. Appreciate your help, wasn't aware of that regulation.

WordPress.org

Forums

Eclipse theme: .current_page_item does not work for Home in navigation (6 posts)

Reply

About this Topic

Tags

Code is Poetry