WordPress.org

Ready to get started?Download WordPress

Forums

CSS Hover Icons on top of right side (above header) (4 posts)

  1. Tilly12
    Member
    Posted 1 year ago #

    Hello. I'm attempting to add social icons with a hover effect, above my header. I'm having many problems; for one, the images/icons aren't even showing up, just the word, like "facebook", with a link you can click on. Secondly, the are in the wrong space. My icons are supp to be above the header on the right side. Instead they are under the header, right above my menu bar. Help please! I've been working on this for two days now. I don't know what I'm doing wrong.

    This is in header.php:
    '<div id="head-soc">

    </div>'

    This is my my style css:

    'a.rss{
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/http://www.basinstbooks.com/wp-content/uploads/2012/05/rss-32.png') bottom;
    text-indent: -99999px;
    }
    a.rss:hover {
    background-position: 0 0;'

    I positioned it under #header

  2. Tilly12
    Member
    Posted 1 year ago #

    Um, I don't know why the code didn't show up properly. If anyone needs to see my site to know what I'm talking about it's, http://www.basinstbooks.com

  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    posting code guidelines: http://codex.wordpress.org/Forum_Welcome#Posting_Code

    a:
    change the class of the rss link:
    <li><a class="rss" href="http://www.basinstbooks.com">RSS Feed</a></li>

    b:
    change the css:

    a.rss{
    	display: block;
    	width: 50px;
    	height: 50px;
    	background: url('http://www.basinstbooks.com/wp-content/uploads/2012/05/rss-32.png') bottom no-repeat;
    	text-indent: -99999px;
    }

    to get rid of the bullets, possibly add to style.css:
    #head-soc ul { list-style-type:none;}

  4. Tilly12
    Member
    Posted 1 year ago #

    Eureka! I see an actual image now, thank you! It doesn't have that hover effect though. I wanted it to change from greyscale to color. And how do I get it above my header on the right side? Sorry for all the questions, I'm sort of a tech newbie.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.