WordPress.org

Ready to get started?Download WordPress

Forums

A nav bar in my header image (21 posts)

  1. promohthree
    Member
    Posted 9 years ago #

    http://www.promohthree.com/

    That's my site. I'd like to put a navbar in the header image (like Binary Bonsair or w-a-s-a-b-i), but I really have no clue where to start. Is this something that's too complex for a relatively naive blogger, or is there some sort of tutorial or guide I could be pointed to in order to help me out?

    Thanks!

  2. Joshua Sigar
    Member
    Posted 9 years ago #

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

    And you could always take a peek on the html and css source code of Binary Bonsai and wasabi

  3. promohthree
    Member
    Posted 9 years ago #

    I checked out the source on w-a-s-a-b-i, but when I tried to mimic it on my site, I just got a list of links under the header. I'll check out that link in the morning, though. Thank you for your reply.

  4. Joshua Sigar
    Member
    Posted 9 years ago #

    Give the container some negative top margin.
    margin-top: -30px;

  5. promohthree
    Member
    Posted 9 years ago #

    Negative top margin? How do I do that?

    Also, I tried putting a navbar in:

    http://www.promohthree.com/

    As you can see, it screwed up my Kubrick theme. Any ideas on what I did wrong?

  6. promohthree
    Member
    Posted 9 years ago #

    OK, I fixed the problem with the background, but I don't know how to bump the navbar up so that it rests on the logo.

  7. promohthree
    Member
    Posted 9 years ago #

    OK, looks I figured that one out too. Learning on the go, what fun!

  8. promohthree
    Member
    Posted 9 years ago #

    The problems I'm having now: trying to figure out how to change the live button (I want the "live" color to move to the appropriate page when someone clicks a link, but right now it just stays lit on the home link).

  9. philpeeps
    Member
    Posted 9 years ago #

  10. gour
    Member
    Posted 9 years ago #

    The problems I'm having now: trying to figure out how to change the live button (I want the "live" color to move to the appropriate page when someone clicks a link, but right now it just stays lit on the home link).

    Hi!

    I have the same problem (Wp1.5 & Kubrick). Tried with the above script but it does not work - it stays on the 1st item.

    Pls. can someone give some more info how to get this "current page" menu?

    Sincerely,
    Gour

  11. philpeeps
    Member
    Posted 9 years ago #

    link to your site?

  12. philpeeps
    Member
    Posted 9 years ago #

    http://atmarama.org/gtk2hs/

    I assume that is your site. Either you set all the list items to id=current or the script is doing that. With the intellimenu, you do not hard code any of the links as id=current.

  13. somefool
    Member
    Posted 9 years ago #

    Its too complicated for me to explain everything, but hopefully this'll help - http://flickr.com/groups_topic.gne?id=11725

  14. Erwin
    Member
    Posted 9 years ago #

    If you copy the code from the source of Binary Bonsai, be sure to copy the appropriate piece of code from the css-file too! Without it, your nav-bar will indeed just be a small list of links with no lay out.

    CSS:
    [code]
    #supernav {
    font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
    position: absolute;
    top: 199px;
    left: 50%;
    width: 720px;
    margin: 0 0 0 -360px;
    padding: 0 25px;
    text-align: left;
    display: block;
    }

    #supernav li {
    display: inline;
    margin: 0;
    padding: 0;
    text-transform: lowercase;
    }

    #supernav a {
    color: #333;
    background: #B5DAE7;
    font-weight: normal;
    height: 19px;
    padding: 5px 16px;
    margin: 0;
    }

    #supernav a:hover {
    color: white;
    background: #f36;
    text-decoration: none;
    }
    [/code]

  15. gour
    Member
    Posted 9 years ago #

    I assume that is your site. Either you set all the list items to id=current or the script is doing that. With the intellimenu, you do not hard code any of the links as id=current.

    No, the script was setting every item to "current" and therefore it produced effect that all items had bold font.

    Now I removed the script so you can see how the plain menu is working - now the nav menu is giving just hover effect.

    My header.php looks like:
    <div id="navbar">
    <ul id="navbarlinks">

    <li><a href="/gtk2hs/" title="Home">Home</a></li>
    <li><a>Overview</a></li>
    ....

    <li><a href="/gtk2hs/screenshots/" title="Screenshots">Screenshots</a></li>
    </ul>
    </div>

    So the question is where I include intellimenu script (I assume after <div id="navbar"> tag) and how does the script look like?

    After some fiddling with it, I feel it's the problem in preg_match('/href="([^"]+)"/', $line, $url);/code>, i.e. it does not create correct $url.

    Anyne?

    Sincerely,
    Gour

  16. gour
    Member
    Posted 9 years ago #

    Its too complicated for me to explain everything, but hopefully this'll help ...

    I believe that menu is working, but I just have problem in making current/active page styled, e.g. with the bold font?

    Sincerely,
    Gour

  17. gour
    Member
    Posted 9 years ago #

    Hi!

    The problem was with the values in if (substr ..) :-(

    After some fiddling I was able to find the right numbers and now it rocks :-)

    Sincerely,
    Gour

  18. philpeeps
    Member
    Posted 9 years ago #

    you might indicate what your value is...

    Can anyone shed some light on the 0 and 5 in Matt's script?

    $lines = split("n", $menu);
    foreach ($lines as $line) {
    $current = false;
    preg_match('/href="([^"]+)"/', $line, $url);
    if (substr($_SERVER["REQUEST_URI"], 0, 5) == substr($url[1], 0, 5)) {
    $line = str_replace('<a h', '<a id="current" h', $line);
    }
    echo $line."n";

  19. gour
    Member
    Posted 9 years ago #

    you might indicate what your value is...

    0...12 because of the prefix. It's best to put some value and experiment a bit.

    Can anyone shed some light on the 0 and 5 in Matt's script?

    from php manual:

    string substr ( string string, int start [, int length])

    which means '0' is a start char and '5' is a length of the substring.

    Sincerely,
    Gour

  20. philpeeps
    Member
    Posted 9 years ago #

    a new problem related to 1.5 with Matt's Intelligent Menu script. If I link to the 1.5 pages in my header images, it highlights them all (other than my gallery), no matter which WP1.5 page I am on...

    http://www.philpeeps.com/wp/ - works correctly with podz static pages hack

    http://www.philpeeps.com/wp15/ - does not work correctly and will not be converted to my real site until it does :(

    Thanks in advance!

  21. philpeeps
    Member
    Posted 9 years ago #

    i got it working, just have to try different values as stated above...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.