Support » Themes and Templates » Pages/sidebar navigation

  • Resolved Fun Joel

    (@fun-joel)


    Hey there! Love the theme, and fyi, newbie here. So sorry if this is a simple fix.

    A few questions related to pages, sidebar links and top nav bar links…

    1. I have a few pages nested under an “About” parent page. Yet in my sidebar, under pages, they are all listed at same level of hierarchy. Plus, they are automatically put into alphabetical order. Is there a way I can change the way they are listed to both show the hierarchy and put them in a specific order of my choosing?

    2. How do I add a tab on the top navigation bar for my “About” page, next to the “Home” tab? And will it drop down to the sub-pages automatically, or do I need to add that manually? If the latter, how do I do that?

    Thanks in advance!

    Joel

Viewing 9 replies - 1 through 9 (of 9 total)
  • An URL would help a lot.

    The ‘listed at same level’ part is a CSS issue. Here is where the URL would help.

    The ordering should be fairly simple. Look in wp-admin->Pages and edit one of your sub-pages. Look to the right for ‘Order’. You can also find the ‘Order’ control in ‘Quick Edit’. Set a number, then do the same for your other pages. If you are using the default ‘Pages’ Widget to display the sidebar page links you’ll need to go into wp-admin->Widgets and set the page widget to order by ‘Page order’. If you aren’t using the default widget, you may have to do something very different.

    The answer to your second question depends on the theme. What theme are you using?

    Sorry — I thought the tag would indicate my theme, but I am using “This Just In!”

    Re: URL, I didn’t include because blog is still unlaunched. Trying to get the whole thing designed correctly first. That being said, the URL is http://www.funjoelsisrael.com — but as I said, please realize that it is still a work in progress. 🙂 But you can look at the Pages section in the sidebar for an example of what I mean.

    I will try to get the pages in order, as you suggest. Thanks for your help!

    Okay, Order option worked. Thanks!

    Now just trying to figure out the indenting subcategories, and also second question about Nav bar.

    Something like li.page_item ul li { margin-left:10px; } should push your nested pages over.

    Take a look in your header.php– I haven’t downloaded the theme so I’m guessing– and you should see a comment block that starts with <!-- Sample navigation menu. Once you find that it should be obvious how you add items to the menu.

    Re: the code for indenting nested pages, which doc should that go in? sidebar.php? or is that something for the whole theme?

    The theme comes with a few things built in in the sidebar, but if you add widgets, it replaces them all with a widgeted sidebar. So not sure if it still belongs in sidebar.php or not. This is full text of what I find when I open sidebar.php:

    <div id="sidebar">
    	<ul>
    	<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    		<li><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>
    
    		<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.-->
    		<li class="calendar">
    		<?php get_calendar(); ?>
    		</li>
    
    		<li><span class="sidetitle">Author</span>
    		<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
    		</li>
    
    		<?php wp_list_pages('title_li=<span class="sidetitle">Pages</span>' ); ?>
    
    		<li><span class="sidetitle">Archives</span>
    			<ul>
    			<?php wp_get_archives('type=monthly'); ?>
    			</ul>
    		</li>
    
    		<?php wp_list_categories('show_count=0&title_li=<span class="sidetitle">Categories</span>'); ?>
    
    	<?php endif; ?>
    	</ul>
    </div>

    Thanks for the “sample navigation menu” tip. That worked and I got the tab up top on the nav bar.

    So now I just need to figure out if/how it is possible to get the sub pages to drop down from the nav bar.

    And to resolve that prior issue with indenting the sub pages in sidebar, and not knowing where to insert that line of code.

    Again, thanks for putting up with the newbie questions. Sorry if I’m being annoying. 🙂

    I tried the solution above for indenting nested pages. Didn’t work. Perhaps I put it in the wrong spot?

    This is the code from my theme’s stylesheet (style.css) for the sidebar section (without the added code from above):

    #sidebar {
    	width: 228px;
    	float: right;
    	margin: 20px 35px 0 0;
    	font-size: 1.3em;
    	display: inline;
    	}
    #sidebar span.sidetitle {
    	color: #333;
    	padding: 3px;
    	text-transform: uppercase;
    	display: block;
    	font-family: "Times New Roman", Times, arial, serif;
    	font-weight: bold;
    	letter-spacing: 1px;
    	font-size: 1.2em;
    	margin: 0;
    	border-top: 4px solid #333;
    	border-bottom: 1px solid #333;
    }
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	}
    #sidebar li {
    	list-style: none;
    	margin: 15px 0;
    	padding: 0;
    }
    #sidebar li li {
    	margin: 0;
    }
    #sidebar a {
    	display: block;
    	color: #222;
    	text-decoration: none;
    	padding: 7px;
    	font-size: 1.1em;
    	font-family: Arial, verdana, tahoma, Helvetica, sans-serif;
    	margin: 0;
    }
    #sidebar a:hover {
    	color: #222;
    	background: #EDEDED;
    	}
    #sidebar ul.children li a{
    	border-left: 10px solid #EDEDED;
    }
    #sidebar ul.children ul.children li a {
    	border-left: 20px solid #EDEDED;
    }
    #sidebar ul.children ul.children ul.children li a {
    	border-left: 30px solid #EDEDED;
    }

    Found the following solution online, and it worked:

    Replace this section of style.css:

    #sidebar ul.children li a{
    	border-left: 10px solid #EDEDED;
    }
    #sidebar ul.children ul.children li a {
    	border-left: 20px solid #EDEDED;
    }
    #sidebar ul.children ul.children ul.children li a {
    	border-left: 30px solid #EDEDED;
    }

    With this:

    #sidebar ul ul ul li a{
        border-left: 10px solid #EDEDED;
    }
    #sidebar ul ul ul ul li a {
        border-left: 20px solid #EDEDED;
    }
    #sidebar ul ul ul ul ul li a {
        border-left: 30px solid #EDEDED;
    }

    So now all I need to figure out is if possible to have sub-pages drop down from nav bar.

    Okay, I am going to mark this topic “Resolved” and start a new one just for the drop down nav question.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Pages/sidebar navigation’ is closed to new replies.