Adding Icons to Header

  • Resolved caraanne

    (@caraanne)


    12 years, 9 months ago

    I have been trying for some time to add social media icons to the header of my site (here) on the right side.

    This is the code I have entered:

    <div id="header_icons">
<a href="http://www.twitter.com/haysgracenyc" target="_blank" alt="Twitter"><img scr="http://haysgrace.com/wp-content/uploads/2013/08/Twitter.png"/></a>
<a href="http://www.facebook.com/haysgrace" target="_blank" alt="Facebook"><img scr="http://haysgrace.com/wp-content/uploads/2013/08/Facebook.png"/></a>
</div>

    With this in the style sheet:

    }
#header_icons{
float:right;
padding-top:5px;
width:195px;
z-index:-9999;
padding-bottom:10px;
}

#header_icons img {
float:right;
height:40px;
width:40px;
margin:0;
margin-left:10px;
}

    My problem is that when I add them, the Navi Menu blocks (About, Clients, Contact) move down. I have tried fumbling around with the style sheet, but am new to css and can’t find anything that works. Please help! Thanks!

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    Moved here: http://ww.wp.xz.cn/support/topic/stop-menu-from-moving-1?replies=1#post-4583699

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Duplicate threads are not cool here – please do not do that.

    We need to see the actual site with the problem to be able to help.

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    Sorry about that, as I said I am new to all of this. I included a link to the site in the original post. Here it is again. If there is any more information I can provide that would be useful to anyone willing to help me out, I would be more than happy to do so.

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Where are the social icons?

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    For the time being I removed them as not to mess with the rest of the header. If it makes it easier, I can add them back in to demonstrate the movement of the menu.

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Yes, that’s what I meant by:

    We need to see the actual site with the problem to be able to help.

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    My mistake, the site contains the problematic icons now. Thanks for your patience.

    http://www.haysgrace.com

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    The images themselves are not visible – not sure why yet – but the space for them is visible – where do you want them to be relative to the menu?

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    You also have a stray closing div tag in your header – see:

    http://validator.w3.org/check?uri=http%3A%2F%2Fhaysgrace.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Actually those errors show why the images are not appearing- you have some typos in there for “img src”

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    Thank you very much, that took care of the images being visible. The position of the icons is fine, slightly above and to the right of the menu. The bottom of the menu, however, should be right along that grey/white line.

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    It also appears to have pushed the content of the rest of the page down, as well.

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Are you using Firebug to work with CSS? That’s the only way to go :). It shows the top margin here is the problem:

    #access {
    display: block;
    float: left;
    margin: 53px auto 6px;
    width: 60%;
}

    Also, is there a reason you are not using a child theme (vs. changing the name on twentyeleven)? You won’t be able to update the theme going forward so you may run into compatibility issues.

    Thread Starter caraanne

    (@caraanne)

    12 years, 9 months ago

    I’m not familiar with Firebug, although after a quick search it seems like I definitely should be using it! Downloading now!

    As far as the theme, I have only been managing it for a few weeks, so I’m not sure why the developer went with one theme rather than another.

    Thanks so much for your help with the menu!

    WPyogi

    (@wpyogi)

    12 years, 9 months ago

    Yep, Firebug will change your life :)!

    As far as the theme, I have only been managing it for a few weeks, so I’m not sure why the developer went with one theme rather than another.

    Hmm, that explains it (sort of) – but unfortunately, you’re now in a position where your theme won’t be updated – so it may at some point have compatibility problems with WP Core. Generally, it’s preferable to use a Child Theme – which lets you modify a theme without modifying the original theme files.

    See: http://codex.ww.wp.xz.cn/Child_Themes

Viewing 15 replies - 1 through 15 (of 16 total)
1 2

The topic ‘Adding Icons to Header’ is closed to new replies.