add social media icon links in custom nav bar 2012

  • Forgive me but I posted in someone else’s resolved thread and am now starting a new post in the hope that someone will actually answer my question.

    I have gotten as far as putting some social media icons in the far right of a custom nav bar but can’t seem to get rid of the word labels that appear over each. Removing the menu name in the custom menu interface makes me loose the item altogether. Also, calling out an optional css style doesn’t seem to make a difference.

    I’d really appreciate your help. I am very new to this.

    Scratch site is here:

    CSS under main nav section of style.css is this:

    }

.main-navigation li.menu-item-267 {! I've just added this to see if it works;
	text-indent: -9999px;
	background-image: url(https://www.worldupsidedown.com/wpnow/wp-content/uploads/2013/04/facebook_24.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 120px !important;
	width: 30px;
	position: relative;
}
.main-navigation li.menu-item-255 {! I've just added this to see if it works;
text-indent: -9999px;
background-image: url(https://www.worldupsidedown.com/wpnow/wp-content/uploads/2013/04/youtube_24.png) !important;
background-repeat: no-repeat !important;
margin-left: -27px !important;
width: 30px;
position: relative;
}

.main-navigation li.menu-item-256 {! I've just added this to see if it works;
text-indent: -9999px;
background-image: url(https://www.worldupsidedown.com/wpnow/wp-content/uploads/2013/04/twitter_24.png) !important;
background-repeat: no-repeat !important;
margin-left: -27px !important;
width: 30px;
position: relative;

}

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    but can’t seem to get rid of the word labels that appear over each

    I don’t see the word labels latest version of chrome. Do they only appear on a particular browser?

    Thread Starter labisca2012

    (@labisca2012)

    Andrew,

    I’m looking at this on an older iMac, and in a new macbook pro laptop running all new versions of browsers.

    In Safari, the icons show without text label overlay, but don’t click through.

    In latest version of Firefox, they click through, showing icons and overlapping text labels.

    I don’t use chrome so it didn’t occur to me to test with it; obviously an error.

    Is there a way I can not name the menu item without it disappearing altogether.

    Thank you.

    To begin with, you absolutely need to be using a Child Theme – as is, all your modifications will be lost when WP is updated.

    https://codex.www.ads-software.com/Child_Themes

    Correct the css’s comment syntax
    https://reference.sitepoint.com/css/comments

    some browsers forgive it, some don’t.

    and yes, please set up a child theme now, it’s easier now than having lots of customization and want to do it later.

    Thread Starter labisca2012

    (@labisca2012)

    Thank you both.

    I will create a child theme!

    Closing the comment correctly seems to have resolved the text label showing up across the icons, but now the icons no longer click through to their respective links.

    Background images are not clickable, so that’s probably not the best way to add the social icons. Get the child theme set up and then we can help you do it a better way – probably adding them to the header.php file and using CSS to put them in the location you want (they won’t be part of the actual menu, but can still appear as is they are).

    The <a> needs to have width so it will be clickable.

    Just move the bg img over from <li> to <a>

    So this

    .main-navigation li.menu-item-267 {/* properties */}

    will become this

    .main-navigation li.menu-item-267 a {/* properties */}
    Thread Starter labisca2012

    (@labisca2012)

    That worked! Thank you so much.

    I’m sure I’ll be back to you with questions about the child theme.
    Many many thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘add social media icon links in custom nav bar 2012’ is closed to new replies.