Header Buttons Issue

  • You can find my site at <a href=”#social li.facebook {
    https://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)

  • 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="https://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="https://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:[email protected]">
		<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

    (@lifebygeek)

    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

    (@lifebygeek)

    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.