Title: Header Buttons Issue
Last modified: August 20, 2016

---

# Header Buttons Issue

 *  [lifebygeek](https://wordpress.org/support/users/lifebygeek/)
 * (@lifebygeek)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/header-buttons-issue/)
 * You can find my site at <a href=”#social li.facebook {
    [http://www.lifebygeek.com/”>www.lifebygeek.com](http://www.lifebygeek.com/”>www.lifebygeek.com).
 * So, I’ve been trying to add a very simple ul to my site’s header that includes
   links to various social media pages (for now just fb and twitter). I’ve gotten
   the buttons to appear in the spot I want (in between the search bar and site 
   title). But I’d like them to appear next to each other rather than on top of 
   one another. I tried changing the display property of the list element to inline
   from block, but when I do the buttons disappear altogether.
 * Also, they are not clickable! Chrome’s developer tools are showing the links 
   as being sized 0x0, and I’ve tried changing that in the css to no avail. First,
   I set the height and width to 100%, and then later tried using an actual value.
   Neither worked.
 * Currently the icons are displayed as the backgrounds of the list elements. I’ve
   also tried displaying them as the backgrounds of their respective links, but 
   couldn’t get them to appear at all in that case. I’ve resized them using the 
   background-size property.
 * Any help would be much appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Digital Raindrops](https://wordpress.org/support/users/adeptris/)
 * (@adeptris)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/header-buttons-issue/#post-2312404)
 * Example with three 32 * 32 icons, not using a UL but divs, assumes the icons 
   are in a **/images/icons/** folder, these do not have to be sized at 32 as we
   add the size in the html, if they are 64 * 64 they will resize.
 * You might want to float the div in the style line 1
 * **UNTESTED:**
 *     ```
       <div style="display: block; position: relative; width:110px; height: auto; margin: 10px auto;">
       	<a href="http://twitter.com/twitname" target="_blank">
       		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" class="alignleft" width=32; height=32 alt="Follow Me" />
       	</a>
       	<a href="http://facebook.com/name" target="_blank">
       		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/fb.png" class="alignleft" width=32; height=32 alt="Facebook" />
       	</a>
       	<a href="mailto:ne@myaddress.com">
       		<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/mail.png" class="alignleft" width=32; height=32 alt="Contact Me" />
       	</a>
       </div>
       ```
   
 * **Developer Tip**
    Add the code to a file called social-header.php
 * Then where you want to add the mini-ribbon:
    `<?php get_template_part('social','
   header'); ?>`
 * Easy then to copy and create a second width: 100%; more icons for the footer,
   social-footer.php
 * HTH
 * David
 *  Thread Starter [lifebygeek](https://wordpress.org/support/users/lifebygeek/)
 * (@lifebygeek)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/header-buttons-issue/#post-2312568)
 * Thanks for the advice, and I’ll definitely try separating it into its own php
   file, but I’d still like to find out why the implementation I’ve tried won’t 
   work. I’m also making an effort to avoid any sort of inline styling if I can.
 * Thanks again!
 *  Thread Starter [lifebygeek](https://wordpress.org/support/users/lifebygeek/)
 * (@lifebygeek)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/header-buttons-issue/#post-2312627)
 * Anyone else think they can help out?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header Buttons Issue’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [lifebygeek](https://wordpress.org/support/users/lifebygeek/)
 * Last activity: [14 years, 7 months ago](https://wordpress.org/support/topic/header-buttons-issue/#post-2312627)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics