I can't figure out how to add one more line of this top bar. Think this is the code: <div id="subnavbar"> <ul id="subnav"> <?php wp_list_categories('orderby=name&title_li=&depth=8'); ?> </ul> </div>
Not all themes will accommodate a second line of menu items. I had this problem before with a theme and kept making pages that would not display/after while my site slowed to a crawl and when I checked...all of the pages that I kept trying to create and display on the menu were in fact created , just not displayed. My suggestion, either shorten your category descriptions so that you can fit another one in, or continue to create them, placing the most important in the menu and also display a category list in the sidebar, or footer that will display them all for complete navigation options. Second option is to open your CSS file and edit your category menu dimensions (make the area longer, double the length) and see if that will allow it to accomidate another line. I may have a different answer if I could see the site, or knew what theme you were using. That's best that I can do by looking at a photo and guessing.
what u r trying to do is similiar to a drop down menu, but rather than a drop down menu you want the submenu to appear on the line below... this is something you need to contract out, mostly the solution is in css
Thanks for replay guys. Lets clarify something: There are no sub categories, joust 10 categories. @hmansfield: I am right now checking my CSS file.
Simple can't solve this issue, here is the CSS part: /************************************************ * Top Navbar * ************************************************/ #topnavbar { background: #111111 url(images/topnav.png); width: 960px; height: 30px; color: #FFFFFF; margin: 0px; padding: 0px; } #topnavbar a, #topnavbar a:visited { font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } #topnavbar a:hover { text-decoration: underline; } #topnavbar p { font-size: 11px; font-weight: bold; padding: 0px; margin: 0px; } .topnavbarleft { width: 230px; float: left; margin: 0px; padding: 8px 0px 0px 10px; } .topnavbarright { width: 600px; float: right; margin: 0px; padding: 7px 10px 0px 0px; text-transform: uppercase; text-align: right; } .topnavbarright a img { border: none; margin: 0px 3px 3px 0px; padding: 0px; } PHP:
This is the header: <!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" <?php language_attributes(); ?>> <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="en" /> <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title> <link rel="Shortcut Icon" href="<?php echo bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" /> <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="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { if (!document.getElementsByTagName) return false; var sfEls = document.getElementById("nav").getElementsByTagName("li"); // if you only have one main menu - delete the line below // var sfEls1 = document.getElementById("subnav").getElementsByTagName("li"); // for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } // if you only have one main menu - delete the "for" loop below // for (var i=0; i<sfEls1.length; i++) { sfEls1[i].onmouseover=function() { this.className+=" sfhover1"; } sfEls1[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover1\\b"), ""); } } // } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> <meta name="google-site-verification" content="bU18xGaqOKHMqst4fOdk4h7QdGT_vh52DJdjTPa0vCo" /> <!-- Start Quantcast tag --> <script type="text/javascript"> _qoptions={ qacct:"p-00CdCBIiIfY_w" }; </script> <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <noscript> <img src="http://pixel.quantserve.com/pixel/p-00CdCBIiIfY_w.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/> </noscript> <!-- End Quantcast tag --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-11216342-1"); pageTracker._trackPageview(); } catch(err) {}</script> </head> <body> <div id="wrap"> <div id="topnavbar"> <div class="topnavbarleft"> <p><script src="<?php bloginfo('template_url'); ?>/javascript/date.js" type="text/javascript"></script></p> </div> <div class="topnavbarright"> <p><a href="<?php bloginfo('rss_url'); ?>"><img style="vertical-align:middle" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('rss_url'); ?>">News Feed</a><a href="<?php bloginfo('comments_rss2_url'); ?>"><img style="vertical-align:middle;margin-left:10px;" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></p> </div> </div> <div id="header"> <div class="headerleft"> <a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a> </div> <!--To define the 468x60 ad, go to your WP dashboard and go to Appearance -> Revolution Church Options and enter the ad code.--> <div class="headerright"> <?php $ad_468 = get_option('revchurch_ad_468'); echo stripslashes($ad_468); ?> </div> </div> <div id="navbar"> <div id="navbarleft"> <ul id="nav"> <li><a href="<?php echo get_settings('home'); ?>">Home</a></li> <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?> </ul> </div> <div id="navbarright"> <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <input type="text" value="Search this website..." name="s" id="searchbox" onfocus="if (this.value == 'Search this website...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" /> <input type="submit" id="searchbutton" value="GO" /></form> </div> </div> <div style="clear:both;"></div> <div id="subnavbar"> <ul id="subnav"> <?php wp_list_categories('orderby=name&title_li=&depth=8'); ?> </ul> </div> <div style="clear:both;"></div> PHP:
Open ur style.css file, then double the height value of the #subnavbar div. e.g If you have 24 px, make it 48px. But I suggest you use sub-categories. Maybe you can put baseball accessories, bags, bath, etc under the Baseball parent category. It will look much better, IMO. Hope that help
Yes "Cameljourney" giving a Good idea. its much better then extend your nav bar. I will give him a point for this idea lol.
Sorry i can't share the blog url. I have already posted the css and header code, i am sure someone can help me.