WordPress.org

Forums

css question - Navigation menu link color when in child page (1 post)

  1. lanlan
    Member
    Posted 6 years ago #

    Hi,

    I have a navigation menu with parent links on the first row, and child links on the second row below it.

    I would like to have the link color change when you are on that specific page. I was able to make most of that work, except, when you are in a child page right now, the color of the parent link goes back to the default color rather than staying in the "you're on this page" color.

    This is strange because I have also set up the background color to change in addition to the link color, and that seems to stay when the link color falls back to default whenever you are on the child page.

    Below is my current working code of css. Thanks so much in advance!

    /***** NAVIGATION *****/
    
    /* parent */
    * {
    	margin:0;
    	padding:0
    	}
    
    #nav {
    	background:#295887;
    	width:100%;
    	margin:2px 0px 0px 0px;
    	height:25px;
    	text-align:left;
    	}
    
    #nav li {
    	margin-right:25px;
    	}
    
    #nav li, #subnav li {
    	float:left;
    	list-style:none
    	}
    
    #nav a, #nav a:visited {
    	color:#ffffff;
    	font-size:12px;
    	text-decoration:none;
    	}
    
    #nav a:hover {
    	color:#ffffff;
    	font-size:12px;
    	text-decoration:underline;
    	}
    
    li.current_page_parent a,
    li.current_page_parent a:visited,
    #nav li.current_page_item a,
    #nav li.current_page_item a:visited
            {
    	background:#e3fae7;
    	white-space:nowrap;
    	padding:5px 10px 5px 10px;
    	color:#325884;
    	font-size:12px;
    	text-decoration:none;
    	font-weight:bold;
    	}
    
    /* child */
    
    #subnav {
    	background:#e3fae7;
    	height:28px;
    	width:100%;
    	text-align:left;
    	}
    
    #subnav li {
    	border-right:1px solid #e2630f;
    	white-space:nowrap;
    	padding:0 7px;
    	}	
    
    #subnav a, #subnav a:visited {
    	color:#325884;
    	text-decoration:none;
    	font-weight:bold
    	}
    
    #subnav li.current_page_item a,
    #subnav li.current_page_item a:visited {
    	padding:5px;
    	background:#ffffff;
    	font-size:10pt;
    	font-weight:bold;
    	color:#325884;
    	text-decoration:none;
    	text-decoration:underline
    	}

Topic Closed

This topic has been closed to new replies.

About this Topic