Need help? Check out our Support site, then


Instagram Social Icon for Mystique Theme

  1. suncanelasolarium
    Member

    Having trouble adding the Instragram Icon on the top bar of Mystique Theme. I have the Instagram widget on Sidebar, but can put it on top bar.

    website is: http://www.suncanela.com

    thank you!

    The blog I need help with is suncanela.com.

  2. Hi @suncanelasolarium, you can add an instagram icon to your top menu. Below are some example rules to do that based on your theme. Here are the general instructions for doing this.

    1. Create a custom link menu item in your custom menu linked to your instagram page. For a label for that menu item, I would suggest something short and simple, such as INS. Save the menu.

    2. You will now need to get the menu ID for that new menu item and there are a couple of ways to do that. You can use the developer tool in your browser to find it, or you can view the source code and search it for "INS" (without the quote marks). The menu ID will look similar to this: menu-item-32.

    3. Upload your image to the media library. To fit in the existing height of the menu bar, I would make the image 28px x 28px. Get the URL of that image.

    4. Add the following code to your CSS and replace the 3201 in the first two rules with the ID number of your menu item you found in #2 above.

    5. Replace URL OF IMAGE (between the quote marks) in the first two rules with the URL of your uploaded image.

    The first rule below adds the image and hides the INS text and sets the width of that menu item at 28px. The second rule repeats the same image in the hover state (when you mouse over it). The third reduces the left and right padding on the menu items so that there is room for your instagram icon.

    #menu-item-3201 a {
        background: url("URL OF IMAGE") no-repeat scroll center center transparent;
        text-indent: -9999px;
        width: 28px;
    }
    
    #menu-item-3201 a:hover {
    background: url("URL OF IMAGE") no-repeat scroll center center transparent;
    }
    
    #access a {
        padding-left: 0.7em;
        padding-right: 0.7em;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic