Creating a new navigation bar from ‘Pages’

  • Hello everyone! New to WordPress, and new to these forums. Looking forward to chatting it up with all of you.

    Here is the website I am working on: https://www.mismatchedpear.com

    My background consists of extensive HTML experience, moderate CSS experience (though after this, moving up pretty quickly), and no PHP experience.

    I effectively moved my designs over to the wordpress. I didn’t use any pre-set theme, just the Kubrick default and tinkered with it for two weeks until finally arriving at something satisfactory.

    I would like to use the Pages feature of WordPress. I was originally going to have my alternate sections be static pages, but it seems easier just to manage the whole bunch through WP.

    I have a vertical sidebar (WP default) and also a horizontal navigation bar. In this Horizontal bar I want to move the “Pages” bit from the Sidebar to the Navbar. When I tried that, it looked really weird, and very vertical. As you can see, my navbar is horizontal and I’m having a hard time aligning my Pages horizontally.

    On the website is the Navbar as I’d like to see it, except with the Pages section instead of static pages. My navbar uses inline UL and LI elements.

    So what is the process to do this? If you’d like more clarification just let me know. Thanks!!!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Use wp_list_pages. Probably something like:

    <ul id="top_nav">
<?php wp_list_pages('title_li=&depth=1');?>
</ul>

    Either place this in header.php. Or in a separate file called ‘sidebar-top.php’ which is then called using <?php get_sidebar('top');?> in header.php.

    The CSS would then go something like:

    #top_nav,#top_nav li {
	margin:0;
	padding:0;
	display:inline;
	line-height:1em;
}
#top_nav a {
	display:inline-block;
	padding:5px;
	margin:0;
	text-decoration:none;
}
#top_nav a:hover,#top_nav a:active,#top_nav a:focus {
	text-decoration:underline;
}

    Hope that helps.

    Thread Starter mismatchedpear

    (@mismatchedpear)

    It works great! Thanks!

    Now, before, each link had a little pear icon preceeding the link itself. It was a simple image.

    I really want the bullets to display as the image of a small pear. I’ve tried embedding images into bullets before but had no luck. So, could we take this a step further and have the LI bullets to display as images?

    To display custom list bullets, use something:

    #top_nav li {list-style-image:url(images/bullet.gif);}'

However, because that top_nav list is now displaying inline, most browsers won't show a bullet image on the <code><li></code> tag - no matter what. So the trick is to add it to the <code><a></code> instead. Assuming your list bullet image is about 12 px wide, something like:

    #top_nav a {
    display:inline-block;
    padding:5px 5px 5px 15px;
    margin:0;
    text-decoration:none;
    background:url(images/bullet.gif) no-repeat left center;
    }`

    should work. Though you might have to fiddle with the image position a little by trying left top or left bottom.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Creating a new navigation bar from ‘Pages’’ is closed to new replies.