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, subscribe to Wes’ free newsletter. Check out Wes’ video tutorial library, “Playing with Media.” Information about more ways to learn with Dr. Wesley Fryer are available on wesfryer.com/after.
On this day..
- Tour of New Apple TV (March 2016) – 2016
- Moderate comments on a Posterous Blog – 2011
- iPhone Tethering, Cellular Bandwidth Consumption, & the Home / School Internet Access Divide – 2011
- Open licensing of educational media content is KEY – 2010
- Tweet On: Microblogging can help you be more creative – 2010
- No medicine for you, the server is down – 2008
- Read/Write web political disruptions – 2007
- Evolving online security threats deserve more attention – 2007
- Thanks Glen! – 2007
- Digital History – 2007
Comments
4 responses to “Help needed with WordPress Header Links CSS”
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
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
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.
Many thanks also to quintosol and Chad Henderson who tweeted this answer to me as well. 🙂