WordPress.org

Ready to get started?Download WordPress

Forums

Navigation bar on top (13 posts)

  1. LanceT
    Member
    Posted 9 years ago #

    Hi i wonder if someone has some php codes or something else for the navigation bar on top of your blog like this http://binarybonsai.com/
    the owner said just rip it but i dont get that

  2. Jinsan
    Member
    Posted 9 years ago #

    http://css.maxdesign.com.au/listamatic/

    Try that.

    Copy the HTML side of it <div id>

  3. etc where you want it in the header.php file

    In your style.css copy and paste the bits where it says #nav etc

  • Rob Poitras
    Member
    Posted 9 years ago #

    some of those menus at listamatic arent ie/mozilla friendly.

    lance if you are using mozilla you can get a plugin that is called the web dev. plugin
    it allows you to view the css file of a page.

    get that plugin, then view the css of binary bonsai. it will have the css for the menu he is using. copy that css into your css file and then put the {li} {ul}
    stuff in your header file.
    it should work after that.
    leme know if you have any more questions.

  • Erwin
    Member
    Posted 9 years ago #

    -how can I post html here-

  • Marc
    Member
    Posted 9 years ago #

    You won't need the Mozilla plugin. Just view the source code with your browser, look for the stylesheet URL in ther pages header.

    Enter that into the browser and it will call up the CSS to view or copy.

  • idbehold
    Member
    Posted 9 years ago #

    This is how I do my nav bar: http://www.workingbath.com/

    HTML
    <div id="nav" class="clearfix">
    < ul>< li class="page_item">< a href="<?php bloginfo('url'); ?>" title="Home">Home< /a>
    < /li>
    <?php wp_list_pages('title_li='); ?>
    < /ul>
    </div>

    CSS
    #nav {
    position: relative;
    background: #f1f1f1;
    border-bottom: 10px solid #fff;
    }

    #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #nav ul li {
    float: left;
    margin: 0;
    padding: 0;
    }

    #nav ul li a {
    text-decoration: none;
    color: #777;
    display: block;
    padding: 10px;
    }

    #nav ul li a:hover {
    color: #fff;
    }

    * html #nav ul li { width: 1%; }

    * html #nav ul li a { height: 1%; }

    nav ul li a:hover { background: #394d65; }

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    * html .clearfix {height: 1%;}

  • LanceT
    Member
    Posted 9 years ago #

    Where do i add those css and html codes ?

  • Jennifer Ledbetter Clay
    Member
    Posted 9 years ago #

    The css will go in your style.css file and the html will go in header.php

  • LanceT
    Member
    Posted 9 years ago #

    Thaks All:)

  • Usayd
    Member
    Posted 9 years ago #

    What are the *'s? i cant get the CSS to work

  • lcf
    Member
    Posted 8 years ago #

  • brainseed
    Member
    Posted 8 years ago #

    wow... all such great info!

  • Beel
    Member
    Posted 8 years ago #

    Looks good but how would either handle subpages generated by the function?

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags

    No tags yet.