Social Media Icons For Mobile Devices On Woocommerce’s Storefront Theme

Social Media Icons For Mobile Devices On Woocommerce StorefrontWoocommerce has kindly provided a Codex snippet to add social media icons to the Storefront theme. Their approach creates a very nice-looking social media icon menu; however, on displays less than 768 pixels in width, the Storefront theme hides the secondary navigation menu location used. Mobile devices using smaller displays end up with no social media icons.

The Storefront theme is a responsive theme, so it really should have the capability to display social media icons at all resolutions. I didn’t even notice there weren’t any until a client pointed it out to me.

I can see why the developers of Storefront hide the secondary navigation menu on smaller displays. There just isn’t room for it. I thought about using CSS to show the menu and move it up above the header when the resolution dropped below 768 pixels, but I just couldn’t get it to look good. What I ended up doing is using the Custom Menu widget to add a custom menu to the “Below Header” widget position using the social media icon menu I created using the Woocommerce snippet, then adding some CSS to hide the new custom menu on larger displays and show it on smaller ones. What follows is a step-by-step procedure on how to do the same for your site. Unfortunately, it’s not a copy-and-paste process because some of the CSS selectors have to be matched to those on your site.

  1. Start by following the steps in Woocommerce’s snippet to create the social media icon menu for larger displays.
  2. Go Appearance -> Widgets, and add a Custom Menu widget to the Below Header location.
  3. Leave the title blank, and select the social icon menu you created in step one in the Select Menu drop-down, then save the widget.
  4. Copy the following CSS to your favorite text editor:
    /* For social media icons for mobile, using a custom menu in the below-header location. You need to change selectors to match the ID of the custom menu container and UL element. */
    /* Hide the menu on large displays. */
    @media (min-width: 768px) {
    #nav_menu-2 {
    display: none;
    }
    }
    
    /* Display the menu on small displays. */
    @media (max-width: 768px) {
    /* Reduce the white space below the header. */
    .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0.5em;
    }
    /* Move the social media icons to the right so they don't interfere with page titles. */
    .menu-secondary-navigation-container {
    float: right;
    }
    /* Set the font-size for the size of icons you want, and set a right margin. */
    #menu-secondary-navigation-1 {
    font-size: 20px;
    margin-right: 20px;
    }
    #menu-secondary-navigation-1 a[href*="dribbble.com"], #menu-secondary-navigation-1 a[href*="facebook.com"], #menu-secondary-navigation-1 a[href*="flickr.com"], #menu-secondary-navigation-1 a[href*="foursquare.com"], #menu-secondary-navigation-1 a[href*="plus.google.com"], #menu-secondary-navigation-1 a[href*="instagram.com"], #menu-secondary-navigation-1 a[href*="linkedin.com"], #menu-secondary-navigation-1 a[href*="pinterest.com"], #menu-secondary-navigation-1 a[href*="reddit.com"], #menu-secondary-navigation-1 a[href*="tumblr.com"], #menu-secondary-navigation-1 a[href*="twitter.com"], #menu-secondary-navigation-1 a[href*="vimeo.com"], #menu-secondary-navigation-1 a[href*="wordpress.com"], #menu-secondary-navigation-1 a[href*="wordpress.org"], #menu-secondary-navigation-1 a[href*="youtube.com"], #menu-secondary-navigation-1 a[href*="mailto:"], #menu-secondary-navigation-1 a[href*="twitch.tv"], #menu-secondary-navigation-1 a[href$="/feed/"] {
    text-indent: -9999px;
    /* Block display is necessary so that the text is removed from the menu items using text-indent. */
    display: block;
    }
    #menu-secondary-navigation-1 a[href*="dribbble.com"]:after, #menu-secondary-navigation-1 a[href*="facebook.com"]:after, #menu-secondary-navigation-1 a[href*="flickr.com"]:after, #menu-secondary-navigation-1 a[href*="foursquare.com"]:after, #menu-secondary-navigation-1 a[href*="plus.google.com"]:after, #menu-secondary-navigation-1 a[href*="instagram.com"]:after, #menu-secondary-navigation-1 a[href*="linkedin.com"]:after, #menu-secondary-navigation-1 a[href*="pinterest.com"]:after, #menu-secondary-navigation-1 a[href*="reddit.com"]:after, #menu-secondary-navigation-1 a[href*="tumblr.com"]:after, #menu-secondary-navigation-1 a[href*="twitter.com"]:after, #menu-secondary-navigation-1 a[href*="vimeo.com"]:after, #menu-secondary-navigation-1 a[href*="wordpress.com"]:after, #menu-secondary-navigation-1 a[href*="wordpress.org"]:after, #menu-secondary-navigation-1 a[href*="youtube.com"]:after, #menu-secondary-navigation-1 a[href*="mailto:"]:after, #menu-secondary-navigation-1 a[href*="twitch.tv"]:after, #menu-secondary-navigation-1 a[href$="/feed/"]:after {
    font-family: "FontAwesome";
    text-indent: 0;
    display: block;
    float: left; }
    #menu-secondary-navigation-1 a[href$="/feed/"]:after {
    content: "\f09e";
    color: #ff9900; }
    #menu-secondary-navigation-1 a[href*="twitch.tv"]:after {
    content: "\f1e8";
    color: #6441A5; }
    #menu-secondary-navigation-1 a[href*="mailto:"]:after {
    content: "\f003"; }
    #menu-secondary-navigation-1 a[href*="youtube.com"]:after {
    content: "\f167";
    color: #bb0000; }
    #menu-secondary-navigation-1 a[href*="wordpress.com"]:after, #menu-secondary-navigation-1 a[href*="wordpress.org"]:after {
    content: "\f19a";
    color: #0073aa; }
    #menu-secondary-navigation-1 a[href*="vimeo.com"]:after {
    content: "\f194";
    color: #aad450; }
    #menu-secondary-navigation-1 a[href*="tumblr.com"]:after {
    content: "\f173";
    color: #32506d; }
    #menu-secondary-navigation-1 a[href*="reddit.com"]:after {
    content: "\f231"; }
    #menu-secondary-navigation-1 a[href*="twitter.com"]:after {
    content: "\f099";
    color: #00aced; }
    #menu-secondary-navigation-1 a[href*="dribbble.com"]:after {
    content: "\f17d";
    color: #ea4c89; }
    #menu-secondary-navigation-1 a[href*="facebook.com"]:after {
    content: "\f09a";
    color: #3b5998; }
    #menu-secondary-navigation-1 a[href*="flickr.com"]:after {
    content: "\f16e";
    color: #ff0084; }
    #menu-secondary-navigation-1 a[href*="foursquare.com"]:after {
    content: "\f180";
    color: #0072b1; }
    #menu-secondary-navigation-1 a[href*="plus.google.com"]:after {
    content: "\f0d5";
    color: #dd4b39; }
    #menu-secondary-navigation-1 a[href*="instagram.com"]:after {
    content: "\f16d";
    color: #517fa4; }
    #menu-secondary-navigation-1 a[href*="linkedin.com"]:after {
    content: "\f0e1";
    color: #007bb6; }
    #menu-secondary-navigation-1 a[href*="pinterest.com"]:after {
    content: "\f231";
    color: #cb2027; }
    #menu-secondary-navigation-1 {
    list-style: none;
    float: right;
    }
    /* Make the icons display inline. */
    #menu-secondary-navigation-1 li {
    position: relative;
    display: inline-block !important;
    text-align: left;
    }
    /* Remove the page icons before each menu item. */
    .menu-secondary-navigation-container li::before {
    content: none !important;
    }
    }
  5. Replace the id “nav_menu-2” with the id of the div for your new custom menu.
  6. Use the search-and-replace function in your text editor to replace the class “menu-secondary-navigation-container” with the class of the div element for your custom menu widget.
  7. Use the search-and-replace function in your text editor to replace the id “menu-secondary-navigation-1” with the id of the ul element for your custom menu widget.
  8. Copy-and-paste the altered CSS into Appearance -> Customize -> Additional CSS, then click Save and Publish.

I tested with four social media icons. As noted with comments in the CSS, you can set your own icon size and right-margin. You may need to adjust these if you are using more or fewer social media icons.