Need help? Check out our Support site, then


Adding social icons to custom menu in Oxygen theme

  1. Is there any way to add Twitter, Facebook and RSS icons to the primary menu in the Oxygen theme using custom CSS please?

    The blog is currently set to private while I work on getting everything in place, hope that's not a problem.

    I've added Twitter and Facebook to the menu and set the CSS classes, but now I'm stuck.

    The blog I need help with is writingsouthwest.org.

  2. Upload your images to your media library, get the URLs of those images and replace URL TW and URL FB between the quote marks in the first two CSS rules below. 32px square icons will probably look a little large, but you can try them. There will likely be some padding and margin adjustments needed to get things aligned the way you want them.

    #menu-item-584 {
    background: url('URL FB') no-repeat scroll top center transparent;
    margin-right: 10px;
    }
    
    #menu-item-585 {
    background: url('URL TW') no-repeat scroll top center transparent;
    margin-right: 10px;
    }
    
    #menu-item-584 a, #menu-item-585 a {
    display: block;
    color: rgba(0, 0, 0, 0);
    }
    
    #menu-item-584 a:hover, #menu-item-585 a:hover {
    color: rgba(0, 0, 0, 0);
    }

    The 584 and 585 are the menu ID numbers for the FB and TW menu items. I got those by viewing your source code, finding the menu stuff and then finding "facebook" and "twitter". If you add more, you can use the above first or second rule as a guide and then edit the URL and the menu item ID number and add that to your CSS. You would then also add a selector to the third CSS rule above for that menu item, with an "a" after it.

    The fourth rule takes away the hover color for the menu labels on the FB and TW menu items so the text doesn't appear when you hover.

    You may also want to shorten the menu labels for those two to perhaps 4 letters each. Decide that after you get your icons in.

  3. That's great, thank you!

    Could you also let me know how I can right-align these icons so they're as far right on the navigation as they can go please?

  4. @abigailedge, just so I don't forget to tell you, your menu ID numbers are backwards in the CSS with the background declarations. The FB icon links to Twitter, and Twitter links to FB.

    First, try just the second rule below alone and narrow down your browser slowly and watch how the icons behave. Narrow it down until the drop down "main menu" appears and then look at the main menu.

    Next, add in the first rule You can try the below and then narrow down your browser slowly and see what happens when the menu items have to go to a second line. When it goes to the drop down menu for small screens, the icons are center aligned. The second rule down, the @media rule, I suggest keeping regardless sets some spacing and such for the small drop down menu..

    Oh, yeah, and your social icons get reversed, so you can rearrange those in Custom Menu.

    .main-navigation .menu-item-584,
    .main-navigation .menu-item-585 {
    	float: right;
    }
    
    @media screen and (max-width: 614px) {
    	#menu-item-2481 {
    		margin-bottom: 20px;
    		background-position: left top;
    		line-height: 30px;
    		float: none;
    	}
    }

Topic Closed

This topic has been closed to new replies.

About this Topic