Inserting Facebook button in Nav Menu

  • Resolved J M

    (@hiphopinenglish)


    12 years, 5 months ago

    Hi all.

    Using a Child Theme of Twentyeleven, I’m experiencing a few issues getting my Facebook “Button” (Menu Item) showing in my nav menu. I’ve created the basic CSS but as I’m not very good at CSS, I’ve messed up!

    #access .facebook {
    float: right;
    }
    #access .facebook a {
    background: transparent url ('/uploads/2012/06/FB-Logo-Final.png') 0 0 no-repeat;
    padding: 0;
    text-indent: -9999px;
    width: 42px;
    }
    #access .facebook a { background-position: 0 -96px; }
    #access .facebook a:hover, #access .facebook a:focus, #access .facebook a:active {
    background: transparent url(uploads/2012/06/FB-Logo-Final.png) 0 0 no-repeat;
    }

    That’s the CSS I’ve used, and in conjunction with that I’ve created the Custom Menu calling the .facebook access in the CSS Classes box when creating the Menu.

    Now, the problem is it’s worked! But not exactly. The button exists but doesn’t show my uploaded .png button I made. (Incidentally it’s 42x42px if that makes any difference). So much so, that the item is clickable if you know it’s there.

    The page in question is and the Button is just left of the menu.

    Can someone please shed light on what’s gone wrong? I’ve checked the URL of my image is correct. Perhaps I’ve not called it correctly in CSS? Any help of course appreciated. Thanks.

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

  • do you have a link to the site?

    Add the images in the child themes folder, create a new sub folder images, This post might help!

    background: url('images/facebook.png');
background-repeat: no-repeat;

    for IE7 send the tag off the page!

    #access .facebook a{
   color: transparent !important;
   padding: 0;
   left: -9999;
}

    David

    Thread Starter J M

    (@hiphopinenglish)

    do you have a link to the site?

    Of course. Sorry I forgot to submit that before! Duh!
    Here’s the link: https://hiphopinenglish.com

    @david. I’ll check your tips in an hour or two (when I can), and I’ll get back to you. Cheers for your help anyway!

    Thread Starter J M

    (@hiphopinenglish)

    Hi to both.

    I’ve read the post you linked to David. It helped, so I’ve now modified my CSS to something similar to what you’d posted there. Here is an exact copy of what I have:

    #access .facebook {
width: 42px;
text-align: center;
float: right;
}
.facebook,
#access .facebook:hover >a,
#access .facebook a:focus
{
background: url('Images/FB-Logo-Final.png');
background-repeat: no-repeat;
padding: 0;
}
.facebook a
{
color: transparent !important;
padding: 0;
left: -9999;
}

    I’ve simplified my image location too, as per your suggestion, creating a folder called Images inside my Child Theme, and placing the .png image inside. Still the same, no result. I can click the button (it exists!) but the image won’t show. Any ideas? Testing in Firefox.
    Link to site in case you missed it is: https://hiphopinenglish.com

    Lastly, I didn’t quite understand what you were saying about IE7. Could you clear that up for me, please?
    Thanks in advance.

    The image is failing to load, it is case sensitive, try and keep the image names and folders all lowercase, so the folder /images/ and the image facebook.png

    Then this should work:

    background: url('images/facebook.png');

    The IE7 part was just that the <a> tag would not render right in IE7.
    You had already coved this off with this line:

    text-indent: -9999px;

    So ignore the IE part.

    HTH

    David

    Thread Starter J M

    (@hiphopinenglish)

    I’ve followed your instructions as best as possible David, but no joy.

    Created folder called images (lowercase, yes) inside child theme. File is named fblogofinal – all lower case. No joy.

    Code is:

    #access .facebook {
width: 42px;
text-align: center;
float: right;
}
.facebook,
#access .facebook:hover >a,
#access .facebook a:focus
{
background: url('images/fblogofinal.png');
background-repeat: no-repeat;
padding: 0;
}
.facebook a
{
color: transparent !important;
padding: 0;
left: -9999;
}

    Seems ok to me, debugging in Firebug shows some weirdness though. Not quite sure what, but not sure it’s calling the image right still. Any ideas? (Lastly, I renamed the menu FB as the Navigation Class as I read on DR that the name being too long could be an issue.)

    Help!

    Just checked in Firebug and the class is facebook and it is looking for and failing to load the image url.

    "images/facebook.png"

    With testing the url it will load!

    The image path is relative to the stylesheet, so that brings us to look at the stylesheet, with FireBug, and all that is in the child themes style.css after the comments is:

    @import "../twentyeleven/style.css";
.entry-meta {
    display: none;
}

    The changes are currently being loaded in the header by a plugin, where are you adding them, in the plugins custom.css text area?

    <!-- fonts delivered by WordPress Google Fonts,
a plugin by Adrian3.com -->

    All your style changes should be in the child themes style.css and not injected into the <head></head> by a plugin, if you just move the custom styles to the child themes style.css, then the problem should be solved!

    HTH

    David

    Thread Starter J M

    (@hiphopinenglish)

    Lovely David. That solved it. To anyone else working on this issue, or a similar one, it seems that if you’re calling an image (or similar) in CSS, you’ll need to add it into your Child Theme’s style.css directly, NOT into the TwentyEleven Theme Extensions plugin Custom CSS area.

    Resolved. Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Inserting Facebook button in Nav Menu’ is closed to new replies.

Tags