Add custom social icons to header menu

Home Forums Accelerate Pro Add custom social icons to header menu

This topic contains 15 replies, has 2 voices, and was last updated by  Bishal Napit 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1360410

    Amy
    Participant

    I would like to add custom social media icons to my header menu, plus two sites that are not listed in Customizer. I thought I could add this as HTML, but there doesn’t seem to be a text area, just the social links and the header menu. Thank you!

    #1360485

    Bishal Napit
    Moderator

    Hi, Amy.

    For that, please ensure that you are on the latest version of the theme and visit Appearance->Customize->Social Links->Additional Social Icons section and manage accordingly? Thanks.

    #1360487

    Amy
    Participant

    Hi, Bishal. Thanks for responding. I have updated the theme, but the Additional Social Icons section only gives me the option to use Font Awesome icons. I want to upload PNGs. Also, that section only allows for input of five social icons, and I have six.

    #1360494

    Bishal Napit
    Moderator

    Hi, Amy.

    For that, maybe if you can code on your own then, you can achieve the same via the child theme updating the ‘header.php’ file as required. Thanks.

    #1360495

    Amy
    Participant

    Hi, Bishal. I can do the HTML, but can you explain how to add to the header.php file? Thanks!

    #1360573

    Bishal Napit
    Moderator

    Hi, Amy.

    You can learn on the child theme here: https://themegrill.com/blog/tutorial-creating-wordpress-child-theme/. You can just copy the file ‘header.php’ over to the child theme and then, modify as required. Hope you are clear on this. Thanks.

    #1360586

    Amy
    Participant

    Thanks, Bishal. I know how to create a child theme, but I am not sure what code to use in the header.php file to add the social icons.

    #1360594

    Bishal Napit
    Moderator

    Hi, Amy.

    You can just add the required HTML code in the required place of header in the same file and check. If you are confused on this and want to add beside the social icons then, you can place that HTML code in before the <nav id="top-site-navigation" class="small-menu" class="clearfix"> code and check for the same. Thanks.

    #1360595

    Amy
    Participant

    Thank you, Bishal. This seems straightforward. I will check back if I have any problems.

    #1360994

    Amy
    Participant

    Hi again, Bishal. I’m hoping you can help me with this a little further, please. I was able to add the icons, but my logo has disappeared. I would like the icons to display on the right rather than the left and to add some padding on top. I tried defining these properties in the style.css file, but it doesn’t do anything.

    Screenshot here: https://drive.google.com/file/d/1zbsmUPX7YAIKHgaNzkaqgzCMGSsVxrNx/view?usp=sharing

    #1361122

    Bishal Napit
    Moderator

    Hi, Amy.

    For that, we may need the link to your site so that we could better check on this issue. Thanks.

    #1361126

    Amy
    Participant

    Thanks, Bishal. It’s https://bcbookprizesdemo.ca/.

    #1361143

    Bishal Napit
    Moderator

    Hi, Amy.

    Can you tell us about how you modified the ‘header.php’ file? Have you done exactly the same as stated previously by u? And for the second issue, can you add some custom class to the social menu so that the CSS can be applied to it? Thanks.

    #1361145

    Amy
    Participant

    Hi, Bishal. I tried to follow what you said before about where to add the HTML. But this is a little complicated for me. Maybe I could order a custom development?

    #1361146

    Amy
    Participant

    I am also wanting to have a little bit of text added beside the logo. Is this something you could do as well?

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.