Help needed with WordPress Header Links CSS

Published by in blogs on March 22nd, 2010

I have a technical WordPress question I’m hoping someone can help me solve. I want to add an additional link in my WordPress theme header to a “Dynamic Duo” page Kevin Honeycutt has created for us to share, in cross-promoting each other as professional development speakers / workshop leaders / keynoters. You can see the link in my header now, but the CSS formatting is not working correctly because the link is not aligned in the middle of the link area. I’m using the LightWord WordPress theme. This is the code I’m using now in my header.php file. Any suggestions to fix this?

<body>

<div id=”wrapper”>

<?php lw_header_image(); ?>

<div id=”header”>

<?php lw_rss_feed(); ?>

<div id=”top_bar”>

<ul id=”front_menu”<?php echo lw_expmenu(); ?>>

<?php echo lw_homebtn(__(‘Home’,'lightword’)); ?>

<li><a title=”Dynamic Duo” href=”http://web.me.com/khoneycuttessdack/kevinhoneycutt.org/Dynamic_Duo.html”>Dynamic Duo</a></li>

<?php echo lw_wp_list_pages(); ?>

</ul>

<?php echo lw_searchbox(); ?>

</div>

</div>

— end of code —

I used HTMLizer to convert this code so WordPress would display it properly.

On this day..

4 Comments »
  • Paul Barrette

    Hi Wesley,

    In looking at the code using Firebug, it appears that the element that you added in the is missing a that the other menu items have. The tags should be nested inside the tags.

    If you make the following code change, you should be all set:

    Dynamic Duo

    I used Firebug to test out the above change and the link jumped right into alignment with all the others.

    Hope this helps

    Paul Barrette

  • Paul Barrette

    Oh crud… WordPress took the code I entered in the comments literally… Doesn’t make much sense above.

    Wes, email me and I’ll send you the code to fix the issue.

    PB

  • http://www.wesfryer.com Wesley Fryer

    Here is the comment and fix Paul sent me – THANKS PAUL!!!! Firebug is available free on getfirebug.com.

    I looked at your site using Firebug and it appears that the new header
    link that you created is missing a nested that all the other
    links in the header have. That span must be a “hook” that allowed
    designer to use CSS to style the header, including the alignment of
    the links. The <span> needs to be added inside the <a> tags of the
    <li> element and then you should be all set:

    <li><a title="Dynamic Duo"
    href="http://web.me.com/khoneycuttessdack/kevinhoneycutt.org/Dynamic_Duo.html"><span>Dynamic
    Duo</span></a></li>

    The Firebug extension is a terrific tool for troubleshooting theming
    issues. I work on a lot of Drupal sites, both for my district and for
    other districts and it has been invaluable.

  • http://www.wesfryer.com Wesley Fryer

    Many thanks also to quintosol and Chad Henderson who tweeted this answer to me as well. :-)

© Creative Commons License