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.

If you enjoyed this post and found it useful, consider subscribing to Wes' free, weekly newsletter. Generally Wes shares a new edition on Monday mornings, and it includes a TIP, a TOOL, a TEXT (article to read) and a TUTORIAL video. You can also check out past editions of Wes' newsletter online free!


Did you know Wes has published several eBooks and "eBook singles?" 1 of them is available free! Check them out! Also visit Wes' subscription-based tutorial VIDEO library supporting technology integrating teachers worldwide!

MORE WAYS TO LEARN WITH WES: Do you use a smartphone or tablet? Subscribe to Wes' free magazine "iReading" on Flipboard! Follow Dr. Wesley Fryer on Twitter (@wfryer), Facebook and Google+. Also "like" Wes' Facebook page for "Speed of Creativity Learning". Don't miss Wesley's latest technology integration project, "Show With Media: What Do You Want to CREATE Today?"

On this day..

Share →

4 Responses to Help needed with WordPress Header Links CSS

  1. Paul Barrette says:

    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

  2. Paul Barrette says:

    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

  3. Wesley Fryer says:

    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.

  4. Wesley Fryer says:

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

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Made with Love in Oklahoma City