If you’re using the GeneratePress Premium theme to build your website and want to add social icons to your navigation bar, this tutorial will show you how to do it quickly and easily using GeneratePress Elements.
Step 1: Access the GeneratePress Elements
First, head to your WordPress dashboard. Navigate to Appearance > Elements, and click Add New Element. Choose the Block Element option and hit Create.
Step 2: Create a New Block Element
Give your new element a title — let’s call it Nav Social Icons. Start by inserting a GenerateBlocks Container. Inside the container, add a Button block.
Step 3: Add Social Icons
Next, choose a Social Icon, like Facebook. Remove the button text by turning on the Remove Text toggle. For the background, clear any color settings, as we want a transparent background. Make sure the text color is set to white, matching your website’s navigation text.
To make the icon more visible while editing, temporarily change the color to black. Clear any padding on the button itself.
Step 4: Duplicate and Customize Icons
Once your first icon is set, duplicate the button to create additional icons. For example, swap the icon for an Instagram logo. Adjust the Left Margin by adding about 8 pixels between the icons.
In the Outer Container, add around 20 pixels of padding on the left.
Step 5: Final Adjustments
With both icons selected, change their color back to white. Then, set the element’s Location to appear on your entire website. This ensures the social icons will be visible wherever your navigation bar is displayed.
Next, go to the Element Tab on the right-hand side. Set the Element Type to Hook, and under Hook Name, choose Menu Bar Items. This hook places the social icons in the desired location within your navigation bar.
Step 6: Publish and Test
Hit Publish, then refresh your website. You should now see your social icons perfectly positioned in your navigation bar.
Step 7: Mobile Optimization
To ensure the icons look good on mobile, add some padding on the right side. Go to your container settings, switch to Mobile View, and add about 20 pixels of padding on the right. Refresh your customizer, and your icons should look great on mobile as well.
