Horizontal Navigation Bar Not Showing Sub-pages (Children)

  • Hello

    I am new to PHP and I have a theme I would like to use but I would like to tweak it so that the navigation bar along the top will show child/sub pages and so forth in a drop down and slide right kind of format when hovering over the selection.

    I have seen this in other themes and I have tried to copy the code from the themes that have the function into my theme but can’t get it to work.

    I think for someone who knows PHP it’s probably just a case of adding a few lines that invoke the children/sub pages, but maybe I am over simplifying things.

    I hope someone can help. Much thanks

    The site is https://cocktaildressesforwomen.net

    The header code is below and the framework.css is below that :

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”https://www.w3.org/1999/xhtml”&gt;

    <head profile=”https://gmpg.org/xfn/11″&gt;
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />

    <title>
    <?php if ( is_home() ) { ?><?php bloginfo(‘name’); ?> | <?php bloginfo(‘description’); ?><?php } ?>
    <?php if ( is_search() ) { ?><?php bloginfo(‘name’); ?> | Search Results<?php } ?>
    <?php if ( is_author() ) { ?><?php bloginfo(‘name’); ?> | Author Archives<?php } ?>
    <?php if ( is_single() ) { ?><?php wp_title(”); ?> | <?php bloginfo(‘name’); ?><?php } ?>
    <?php if ( is_page() ) { ?><?php bloginfo(‘name’); ?> | <?php wp_title(”); ?><?php } ?>
    <?php if ( is_category() ) { ?><?php bloginfo(‘name’); ?> | Archive | <?php single_cat_title(); ?><?php } ?>
    <?php if ( is_month() ) { ?><?php bloginfo(‘name’); ?> | Archive | <?php the_time(‘F’); ?><?php } ?>
    <?php if (function_exists(‘is_tag’)) { if ( is_tag() ) { ?><?php bloginfo(‘name’); ?> | Tag Archive | <?php single_tag_title(“”, true); } } ?>
    </title>

    <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” />
    <!– leave this for stats –>

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    <link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />

    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery-1.2.6.min.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery-ui-personalized-1.5.2.packed.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/sprinkle.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/glide.js”></script>

    <?php wp_head(); ?>

    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/cufon-yui.js”></script>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/cl.font.js”></script>

    <script type=”text/javascript”>
    Cufon.replace(‘h1’);
    Cufon.replace(‘h2’);
    Cufon.replace(‘h3’);
    Cufon.replace(‘cite’);
    Cufon.replace(‘blockquote’);
    Cufon.replace(‘#logo’);
    Cufon.replace(‘#description’);
    </script>

    </head>
    <body>

    <div id=”wrap”>

    <div id=”logo”>/”><?php bloginfo(‘name’); ?></div>

    <div id=”description”><?php bloginfo (‘description’); ?> </div>

    <div class=”clearboth”> </div>

    <div id=”subbar”>
    <ul id=”menu2″ style=”padding:0; margin:0;”>

    <li <?php if ( is_home() ) { ?> class=”current_page_item” <?php } ?>>/”>Home
    <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>

    <div class=”clearboth”> </div>
    </div>

    </div>

    Here is the framework.css :

    body {
    padding : 0;
    margin : 0;
    font : 0.9em trebuchet ms, Arial, sans-serif;
    line-height : 1.3em;
    background: #fcc url(images/headerback.jpg) top center repeat-x;
    color : #111;
    }

    a {
    color : #626262;
    }
    a:hover {
    color : #000;
    }

    h1 {
    font : normal 3.5em Trebuchet ms, Arial, Sans-Serif;
    padding : 8px 0 4px 0;
    margin : 0;
    }
    h2 {
    font : normal 2.5em trebuchet ms, Arial, Sans-Serif;

    }
    h3 {
    font : normal 2em Trebuchet ms, Arial, Sans-Serif;
    padding : 4px 0;
    margin : 0;
    }
    img { border : 0 }
    .right { float: right }

    ul , ol{
    margin: 0 0 0 20px;
    padding : 0 0 0 10px;
    }

    hr {
    height : 2px;
    border-style : none;
    color : #000;
    margin : 10px 0;
    }

    .clear { clear:both; height:0px;}

    .content {
    margin : 0 auto;
    width : 970px;
    background:#fff;
    border:5px solid #933;
    }

    .transcontent {
    margin:0 auto;
    width:980px;
    padding:5px;
    }

    #wrap {
    width:980px;
    margin:0 auto;
    height: 400px;
    background:url(images/header.jpg) top center no-repeat;
    }

    #subbar {
    height:45px;
    padding: 25px 0px 5px 0px;
    margin:0 0 0 -20px ;
    }

    ul#menu2 {
    margin: 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
    font : 1.2em trebuchet ms, verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    }

    ul#menu2 li {
    float: left;
    padding: 0 15px;
    margin: 0;

    }

    ul#menu2 li a:link,
    ul#menu2 li a:visited{
    display: block;
    padding: 5px 5px;
    text-decoration: none;
    color: #111;
    border-bottom:4px solid #fcc;
    }

    ul#menu2 li a:hover ,
    ul#menu2 li a:active, .current_page_item a{ border-bottom:4px solid #933; }

    #logo {
    margin:0;
    padding: 150px 0 0 0;
    font : bold 6em trebuchet ms, Georgia, Arial, sans-serif;
    color: #933;
    }
    #logo a { color: #933; text-decoration: none}
    #logo a:hover { color: #933; text-decoration: none }

    #description {
    color: #000;
    font:normal 2em trebuchet ms, Georgia, Arial, sans-serif;
    width:100%;
    margin: 15px 0 0 0;}

    #header {
    margin:0px auto;
    width:980px;
    height:375px;
    padding:5px;
    background:#933;
    border:5px solid #933;
    }

    #main {
    padding: 10px;
    }

    #left_side {
    margin : 0 20px 0 0;
    padding:0 10px;
    width :650px;
    float:left;
    color: #111;
    }

    #left_side h1 { background:#933 ; margin: 5px 0 20px 0; padding:5px; color:#fff;}

    #left_side img {
    border:1px solid #933;
    padding:4px;
    background:#933;
    max-width:640px;
    float:left;
    }

    .entry { padding: 10px 0px; }
    .homeentry { padding: 0px;}
    .homeentry p { margin:0; padding:0;}

    #left_side h2 {
    font : 2.5em trebuchet ms, verdana, Arial, Sans-Serif;
    color: #933;
    padding: 0 0;
    margin:0 ;
    }

    #left_side .mpart h2 {
    font : 2.8em trebuchet ms, verdana, Arial, Sans-Serif;
    color: #933;
    padding: 0 0;
    margin:5px 0 0 0;
    }

    #left_side h2 a { color: #933; text-decoration:none; background:none;}

    .post { margin: 0px 0 25px 0; padding: 5px 0 0px 0 ; }
    .mpart { margin: 0px 0 20px 0; padding: 0 0 20px 0 ; border-bottom: 1px solid #fcc }

    .post .left { width:270px; float:left; }
    .post .right { width:380px; float:right;}

    .feature { padding: 10px; float:left; margin: 10px 10px 10px 0; }

    .grey, .comment-meta { padding:2px 6px; background:#933; margin:2px 0; color:#fff; text-transform:uppercase;}

    .grey a, .comment-meta a { color: #ffffff; text-decoration:none;}

    #left_side .info {
    padding : 3px 5px;
    margin : 2px 0;
    font : 1em trebuchet ms, georgia, Arial, Sans-Serif;
    color : #fff;
    font-weight:normal;
    background:#933;
    }

    #left_side .info a { color:#fff; text-decoration:none; background:none;}

    .time { background: url(images/blog.gif) left center no-repeat; padding: 10px 10px 10px 25px; }
    .category { background: url(images/tag.gif) left center no-repeat; padding: 10px 10px 10px 25px; }

    #left_side p {
    color : #111;
    padding : 0;
    text-align : justify;
    }

    #left_side blockquote {
    padding-left : 20px;
    border-left : 3px solid #666;
    color:#666;
    margin : 10px 0 10px 10px;
    font-style:italic;
    font-family: palatino linotype, times new roman, trebuchet ms;
    font-size:2em;
    }

    .commentlist {
    padding: 20px 0;
    margin: 10px 0;
    }

    .commentlist li { clear:both; list-style:none; padding: 20px 0; }

    .comment { padding: 10px 8px; }
    .comment strong { text-align:left; }

    .avatar { float:right; margin: 0 10px 10px 0;}
    .says { display:none;}

    cite { font-size:1.5em;}

    .right_side {
    float :right;
    width : 280px;
    overflow : hidden;
    padding:0;
    margin:0;
    color:#333;
    font : .9em/1.7em Trebuchet MS, Georgia, Arial, sans-serif;
    }

    .right_side a { color:#933; text-decoration:none;}
    .right_side .ad { margin: 0px auto; padding:0 5px; }
    .right_side .ad img { border:none; margin:3px; padding:0;}

    .right_side p {
    padding : 0 0 5px 5px;
    }

    .right_side .widgets { margin: 12px 0; }

    .right_side .widgets ul {
    padding : 5px 0 15px 0px;
    margin:0;
    font-size:1.2em;
    }

    .right_side .widgets li {
    list-style : circle;
    list-style-position:inside;
    margin:0;
    padding: 2px 0 4px 0;
    border-bottom:1px dashed #ddd;
    color:#933;
    }

    .right_side .widgets li:hover {
    list-style : disc;
    list-style-position:inside;
    color:#933;
    }

    .right_side .widgets li a{
    color: #933;
    text-decoration:none;

    }
    .right_side .widgets li a:hover {
    color: #933;

    }
    .right_side h3 {
    color : #666;
    font : normal 2em/150% Trebuchet ms, Georgia, Arial, Sans-Serif;
    width : 100%;
    border-top:2px solid #ddd;
    border-bottom: 1px dashed #ddd;
    margin:0;
    text-transform:uppercase;
    }

    .right_side .extra {
    padding: 10px;
    }

    #footer {
    width : 980px;
    margin:0 auto;
    padding:5px;
    font-size:0.9em;
    color : #000;
    background:#fcc url(images/blue.jpg);
    text-align:center;
    border:5px solid #fcc;
    text-transform:uppercase;
    }

    #footer a {
    text-decoration : none;
    color:#933;
    }

  • The topic ‘Horizontal Navigation Bar Not Showing Sub-pages (Children)’ is closed to new replies.