Advanced CSS help

  • Unknown's avatar
    brlingo · Member ·

    Hi guys and gals,

    I’m a Twenty Twelve theme user and I’d like to have some social icons with active links above my site header and beside the menu (right aligned). I have the graphic resources but I’m unaware on how to apply this using CSS (or if it is even possible).

    Would anyone be able to help?

    Thanks a lot,
    Victor

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    michaelvandenberg · Member ·

    Hi there,

    This should be possible. But first I’ll need you to add the links to your main menu, just behind the regular menu items.

    You can do that on this page:
    https://brlingo.wordpress.com/wp-admin/nav-menus.php

    • Click on Custom URL.
    • Paste the URL of your Facebook.
    • Add link text (Facebook).
    • Click: “Add to menu.”
    • Continue adding the rest of your social links.

    The second thing I need are the images/icons you want to use. If you can let me know where I can find them, than I might be able to help you.

    The plan is to move a few specific menu items to the right and replace them with the images you want.

    Best regards,

    Michael

  • Unknown's avatar
    brlingo · Member ·

    Hi Michael,

    First of all, thanks so much for your kind assistance.

    Menus added and saved (though I can’t see them on my site right now).

    You can find the images (will be resized eventually) at:
    https://brlingo.files.wordpress.com/2015/09/iconin.png
    https://brlingo.files.wordpress.com/2015/09/iconfb.png
    https://brlingo.files.wordpress.com/2015/09/icontw.png
    https://brlingo.files.wordpress.com/2015/09/iconma.png

    Please let me know what else is needed.

    Kind regards,
    Victor

  • Unknown's avatar
    michaelvandenberg · Member ·

    Hi Victor,

    Glad to help :)

    Don’t forget to save the menu when you’ve added those items.
    (You should click on the “Save Menu” button on the right.)

    If all went well you should see them in the menu. :)

  • Unknown's avatar
    brlingo · Member ·

    Hi Michael,

    I’ve saved the menu alright. Could some current CSS or setting I use for the site be preventing the new menu items from appearing?

  • Unknown's avatar
    michaelvandenberg · Member ·

    This will hide the item while I can work on the social links: 

    .page-item-XX {
	display: none;
}

    The XX should be replaced with the number of the item you want to hide. But it will only take a minute or 10 to add the images.

  • Unknown's avatar
    brlingo · Member ·

    I had to go to Manage Locations to assign the menu. No the new items are visible.

    No need to hide them for now, take your time!

  • Unknown's avatar
    brlingo · Member ·

    Small typo above. Should read “Now the new items are visible.”

  • Unknown's avatar
    michaelvandenberg · Member ·

    This should help you on your way: 

    .menu-item-472,
.menu-item-473,
.menu-item-474,
.menu-item-475 {
	float: right;
	margin: 0 0 0 1.857142857rem;
}
.menu-item-472 a,
.menu-item-473 a,
.menu-item-474 a,
.menu-item-475 a, {
	width: 35px;
	height: 35px;
	overflow: hidden;
	color: transparent;
	background-size: cover!important;
	background-position: center!important;
	background-repeat: no-repeat!important;
}
.menu-item-472 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconfb.png);
}
.menu-item-473 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/icontw.png);
}
.menu-item-474 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconin.png);
}
.menu-item-475 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconma.png);
}

    You’ll probably need to tweak a few things (margins, height and width most likely) and make it more mobile friendly. But unfortunately I don’t have any time to help you out anymore, I can check back tomorrow or someone else can help you further.

    Good luck!

    Best regards,

    Michael

  • Unknown's avatar
    brlingo · Member ·

    Hi Michael,

    Thanks a lot for all your help so far! I’ll try to adjust things further, but I’m unsure if I should adjust the image size via CSS or directly in my Media Gallery.

    I’ll come back here in case all goes haywire ;)

    Kind regards,
    Victor

  • Unknown's avatar
    brlingo · Member ·

    Hi again Michael,

    Here’s what it looks like with the CSS: https://brlingo.files.wordpress.com/2015/09/with-css.png

    Here’s what I wish it would look like: https://brlingo.files.wordpress.com/2015/09/trying-to-achieve.png

    Some observations:
    • The CSS seems to scramble the order of the menu items, ignoring the settings in the nav-menu page
    • Is it possible to hide the labels (link text)? I’ve tried removing it on the nav-menu page, but that wipes off the menu item altogether
    • I was unable to resize the images using different numbers for width and height on the CSS

    Sorry for my limited knowledge on this subject — and for apparently relying solely on your expertise — but I was unable to tweak the CSS to my liking (actually, with every change made, I just got further away from my goal). Hopefully you’ll be able to help me a bit more.

    Thanks and regards,
    Victor

  • Unknown's avatar
    michaelvandenberg · Member ·

    Hi Victor,

    I made a typo yesterday after which all the styles got ignored. I also had to be more specific so I could overwrite the existing styles.

    This should work: 

    #site-navigation ul.nav-menu li.menu-item-485,
#site-navigation ul.nav-menu li.menu-item-473,
#site-navigation ul.nav-menu li.menu-item-474,
#site-navigation ul.nav-menu li.menu-item-475 {
	float: right;
	margin: 0 0 0 0.6rem;
}
#site-navigation ul.nav-menu li.menu-item-485 a,
#site-navigation ul.nav-menu li.menu-item-473 a,
#site-navigation ul.nav-menu li.menu-item-474 a,
#site-navigation ul.nav-menu li.menu-item-475 a {
	width: 30px;
	height: 30px;
	overflow: hidden;
	color: transparent;
	background-size: cover!important;
	background-position: center!important;
	background-repeat: no-repeat!important;
}
#site-navigation ul.nav-menu li.menu-item-485 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconfb.png);
}
#site-navigation ul.nav-menu li.menu-item-473 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/icontw.png);
}
#site-navigation ul.nav-menu li.menu-item-474 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconin.png);
}
#site-navigation ul.nav-menu li.menu-item-475 a {
	background: url(https://brlingo.files.wordpress.com/2015/09/iconma.png);
}

#site-navigation ul.nav-menu.toggled-on li.menu-item-485 a,
#site-navigation ul.nav-menu.toggled-on li.menu-item-473 a,
#site-navigation ul.nav-menu.toggled-on li.menu-item-474 a,
#site-navigation ul.nav-menu.toggled-on li.menu-item-475 a {
	display: inline-block;
	margin-top: 30px;
}

    Also because we are floating the items one after the other they will be displayed in reverse order. So if you want Facebook as the last item you should add at as the first in the menu editor.

    Let me know if this works!

    Best regards,

    Michael

  • Unknown's avatar
    brlingo · Member ·

    Hi Michael,

    Yes, it works perfectly! Thanks so much for taking the time to help me out on this. I really, truly, appreciate it.

    Please let me know if you ever need my assistance on anything related to my area of expertise (translation/music).

    Have a great weekend! Best regards,
    Victor

  • Unknown's avatar
    lanason · Member ·

    You have just done exactly what I want to do – now the challenge is to try and copy what you did !!!!!!!!!!!!!!

  • The topic ‘Advanced CSS help’ is closed to new replies.