WordPress.org

Forums

Trouble styling wp_list_pages (2 posts)

  1. CtiaKitahara
    Member
    Posted 7 years ago #

    Hi,

    I'm trying to make a horizontal menu with wp_list_pages in my blog. I'm styling it so the main navigation shows in one line and the subnavigation in one line under it. And I want to show the subnavigation only at the pages it belongs to. I'm trying to do it with the classes current_page_parent and current_page_itm, but it's not working.

    Here's my css:

    #nav {
    	position:absolute;
    	left: 220px;
    	width: 530px;
    	height: 41px;
    	padding-top: 39px;
    }
    #nav li { /*float the main list items*/
    	float: left;
    	display: block;
    }
    #nav li.page_item a { /*style the main nav links*/
    	display: block;
    	font: 100% "Arial Narrow", Arial, Verdana, Helvetica, sans-serif;
    }
    #nav li.page_item current_page_parent a { /*highlight the actual section - isn't working*/
    	color: #FFF;
    }
    #nav li.page_item ul li.page_item{ /*put the subnav below and hide them all*/
    	display: none;
    	position: absolute;
    	height: 15px;
    	left: 0;
    	padding-top: 5px;
    }
    #nav li.page_item ul li.page_item a { /*style the subnav links*/
    	font: 70% Arial, Verdana, Helvetica, sans-serif;
    	padding: 0 6px 0 6px;
    	border-right: 1px solid #CCC;
    }
    #nav li.page_item ul li.page_item a:hover{ /*style the subnav links*/
    	border-bottom: 3px solid #FFF;
    }
    #nav li.page_item current_page_parent ul li.page_item current_page_item { /*show only the subnav of the current section - isn't working*/
    	display: block;
    }

    And the code:

    <ul id="nav">
    	<li class="page_item"><a href="http://localhost/wordpress/?page_id=2" title="Biografia">Biografia</a></li>
    	<li class="page_item current_page_parent"><a href="http://localhost/wordpress/?page_id=13" title="Cotidiano">Cotidiano</a>
    		<ul>
    		<li class="page_item current_page_item"><a href="http://localhost/wordpress/?page_id=17" title="Dia-a-dia">Dia-a-dia</a></li>
    		</ul>
    	</li>
    	<li class="page_item"><a href="http://localhost/wordpress/?page_id=14" title="Pessoais">Pessoais</a>
    		<ul>
    		<li class="page_item"><a href="http://localhost/wordpress/?page_id=19" title="Festa do Divino">Festa do Divino</a></li>
    		<li class="page_item"><a href="http://localhost/wordpress/?page_id=18" title="Las Cholas">Las Cholas</a></li>
    		</ul>
    	</li>
    	<li class="page_item"><a href="http://localhost/wordpress/?page_id=15" title="Publicações">Publicações</a>
    		<ul>
    		<li class="page_item"><a href="http://localhost/wordpress/?page_id=20" title="Capas">Capas</a></li>
    		</ul>
    	</li>
    	<li class="page_item"><a href="http://localhost/wordpress/?page_id=16" title="Contato">Contato</a></li>
    </ul>

    Could somebody help, me please!

    Thanks,
    Cátia

  2. Chad_Coleman
    Member
    Posted 7 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.