WordPress: How to add Social Icons to the menu/navbar

You can add a range of icons to the navbar/menubar by following the steps below:

1. Make sure that a menu has been created and assigned to the “Primary” position .Click here for more guidance on setting up menus.

2. Add the links to your social media pages under pipdig > Social Links

3. Go to Appearance > Customize and view the “Navbar Icons” section, as shown below. Then select any icons you’d like to display.

Article tags: search icon, social media, menus, buttons, button

Was this article helpful?

26 Comments

  1. Emma

    Hi Phil, I have the equinox theme. I added a top bar with links to two pages. How do I align the links to the pages on the left side of the screen? Also, how do I move the social icons to the top bar, and align the icons on the right? Many thanks, Emma

    1. Phil (pipdig)

      Hi Emma, unfortunately that is not possible in the “Extra top menu” option. However it is possible if you use the “Primary” menu position instead. You can left-align the menu via the “General Options” section of the Customizer.

      1. kari beckett

        Hi Phil. I don’t see that there is an option to left align the icons in the menu bar in the general options section. I have the Holly & Weave theme. Please advise. Thank you.

        1. Phil (pipdig)

          Hi Kari, the option described above will only left align the menu items. The social icons will always align to the right unless you are using an RTL language.

  2. Becca

    Hi Phil! For some reason my search button in top nav just moves my whole page to the side when clicked. It could be because I’ve changed a lot of CSS, but I’m not sure where to start to fix this. If you have any suggestions that would be great! Thank you in advance.

    1. Phil (pipdig)

      Hi Becca! We just released an update for the theme which includes a new search feature. This should fix any issues that are showing on it currently. You can update any time via this guide.

  3. Farrah

    Hi Phil, I’ve followed all 3 steps mentioned but the social icons are still not displaying in my navbar. I’ve tried many times. Please help!

    1. Phil (pipdig)

      Hi Farrah, you may need to go through each step once more, checking the information carefully. If the icons are not showing, it means that one of the steps has not been completed.

      Have you assigned a menu to the “Primary” position as per step 1?

      1. Farrah Aslam

        I forgot to check the box to assign it to the primary position! Thanks for your help it’s all good now 🙂

  4. Alexa Garcia

    Hi! Is there a way for me to make my social icons slightly smaller, without affecting the size of my navbar menu titles?

  5. Gabriela Schiller

    Hello,

    My social icons and search on menu bar are totally on the right side. I’d like to know where I can insert more space (css) because they are in the end of the page. Tks

    1. Phil (pipdig)

      Hi Gabriela, I can’t currently see your site as it is is hidden behind a “coming soon” page. Would you be able to disable that so I can take a look?

        1. Phil (pipdig)

          Thanks! If you disable this option in the customizer it will push the menu into the middle. Currently the menu is set to “full width” which is why it is touched the left/right edges of the screen.

            1. Phil (pipdig)

              Glad it helped!

              This exact layout would require some custom features. The scattered style of images would need to custom modules. However it is possible to create dynamic layouts within blog posts and pages by using plugins such as Beaver Builder too.

  6. sara

    Hi!

    I have added my social icons to the menu/navbar but they are not at the same level, they are just on row below the menu. I would like them to be aligned in the same row. Is that possible?
    Thanks a lot!

    1. Phil (pipdig)

      Hi Sara, it sounds like you might have too many menu items, so there is no space left for the social icons which are therefore being pushed down below. You may wish to consolidate some of your menu items into dropdowns.

  7. Kimberly

    How do I move the Navbar icons from my Primary Menu to the Top Bar Menu (on Equinox)?

    1. Phil (pipdig)

      Hi Kimberly, that’s not possible using the standard theme options. The icons will always be added to the Primary menu since this is the main menu of the theme. There might be a plugin you could use to add a search bar to any menu though.

  8. Mo

    HI Phil, I have followed the steps and the social icons still will not add to the nav/menu bar. I have the culture shock theme. In the template example it shows that I should able to add them but for some reason it won’t.

    1. Phil (pipdig)

      Hi Mo, are you 100% sure you’ve completed step 1 and 2 above? It sounds like at least one of those features hasn’t been set. This is the only way the icons would not be shown.

      1. Monique

        Phil, You are absolutely right. I had not completed Step 2. I thought because I had already added social media links on the widgets page that that was the actual step! All is good. Thanks so much for your help.

Leave a comment


The link to your website will be visible to support staff only and will not be shown publicly.
If you do not yet have a website, simply enter "none" in the box.