Cannot get Active state to work in nav

2 Views

I am building a custom site in wordpress. In my CSS, I have been able to get all the styling correct for my main navigation except the active state. In addition to the nav item being underlined on hover, I would like it to stay underlined when you are on the selected page. I can’t seem to figure out what I’ve got wrong in my code.

CSS

Read More
body {
background:#cfcfcf;
padding:0px;
margin:0px;
}

#content {
font-size:14px;
font-family:Arial, Sans-Serif;
}

#box {
background:white;
width:824px;
min-height:650px;
margin:auto;
}

#copy {
width:520px;
float:left;
margin-top:0px;
}

#form {
width:235px;
margin-right:20px;
float:right;
}

/*header---------------------------------------------------------------------*/

#header {
width:auto;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:0px;
background: transparent no-repeat;
}

#logo{
background: transparent url("http://ahsvegas.com/wp-content/uploads/2015/11/AHS_Vegas_Logo.png") no-repeat;
width:475px;
height:130px;
overflow:hidden;
margin-left:auto;
margin-right:auto;
margin-bottom:35px;
margin-top:80px;
}

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

#topbg {
margin:auto;
padding:0;
overflow:hidden;
background-color:#07094b;
position:absolute;
top:0;
width:100%;
height:70px;
}

#navmenu {
width:784px;
margin:0px auto;
}

#navmenu ul {
list-style-type: none;
display: inline-block;
float:left;
margin:0;
padding:0;
}

#navmenu li {
display:inline-block;
}

#navmenu ul li a {
display:inline-block;
color: white;
font-size:18px;
font-family:Arial, Sans-Serif;
padding:24px 32px 0px 0px;
text-decoration: none;
}

#navmenu ul li a:hover {
text-decoration:underline;
}

#navmenu ul li a:active {
text-decoration:underline;
}

#social {
padding:6px 0px 0px 0px;
float:right;
}

/*post------------------------------------------------------------*/
.post {
color:#000000;
padding:5px 20px;
margin-top:-6px;
}

h1 {
color:#000000;
font-family:Helvetica, Sans-Serif;
font-size: 24px;
text-decoration:none;
margin-top:10px;
}

h3 {
color:#000000;
font-size: 16px;
text-decoration:none;
}

.entry {
color:#000000;
padding:0px 20px 0px 20px;
}

.entrytext {
}

.pagetitle {
}

/*links------------------------------------*/

a {
color:#07094b;
font-size: 13px;
text-decoration:underline;
padding: 0px; 
}

a:hover {
color:#000000;
text-decoration:underline;
}

/*Misc -----------------------------------*/

a img {
border:0px;
}

img {
border:0px;
}

.description {
padding:0 5px 15px 5px;
}

.hp-wrap {
    display: none;
}

/*footer---------------------------------------*/

footer {
font-family:Arial, Sans-Serif;
text-align:center;
font-size: 12px;
color:#000000;
background:#ffffff;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px auto;
width:824px;
}

footer a {
font-size: 12px;
color:#000000;
text-decoration:none;
}

footer a:hover {
color:#07094b;
text-decoration:underline;
}

Header PHP: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="distribution" content="global" />

<meta name="robots" content="follow, all" />

<meta name="language" content="it, en" />

<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name');  ?></title>

<meta name="generator" content="HandymanLasVegas<?php bloginfo('version'); ?>" />


<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/combo.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script>


<?php wp_head(); ?>
<style type="text/css" media="screen">
<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
</head>
<body>     

<div id="header">

<div id="topbg">

<div id="navmenu">
        <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<div id="social">

<a href="https://www.facebook.com/American-Handyman-Services-Inc-259437720757501/timeline" target="_blank"><img src="http://ahsvegas.com/wp-content/uploads/2015/12/AHS_Facebook.png" width="55" height="55" /></a>
<a href="mailto:test@test.com"><img src="http://ahsvegas.com/wp-content/uploads/2015/12/AHS_Email.png" width="55" height="55"/></a>

</div>  

</div>     

</div>

    <a title="Home" href="http://www.ahsvegas.com"><div id="logo" style="cursor: pointer;"></div></a>
</div>

<div id="box"> 


<!-- end header -->
Post Views: 2

Related posts

1 comment

  1. WordPress is adding the class ‘current_page_item’ on the li, so in your css use #navmenu ul li. current_page_item a instead of #navmenu ul li a:active

Comments are closed.