Home>Support>add social media icons in menu manually

add social media icons in menu manually

Hello – I am trying to figure out how to add my social media icons in the menu bar on the right. I am not using a program, just taking the icon and putting a link to it. I tried to look for info. in the forum but have not been able to see anything that would help. Hope you can…. thanks. (site is not live).

URL: http://www.graceunlimited.ca/design/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Hi Jo-Anne

    Thanks for reaching out.

    There isn’t a widget area in the menu. One way you could still add icons would be to add Custom Links to your menu via Appearance > Menus and assign them icons with no label using:

    https://wordpress.org/plugins/menu-icons/

    Hope that helps.

  2. 7 years, 1 month ago Jo-Anne Roche-Ross

    Ok…gave up on the first idea. What I have seen is people who use the site origin social widget, and you have given them the link to the child theme… which i have added. Like them, the icons go in the menu but now they are vertical, not horizontal. I want them to be again, on the far right and horizontal. I have seen some snippets of code you also told them to use but is not working for me. What is the top section of code suppose to look like above the media query, or better put… what does the code have to be to get it to work. Again, I have added the child theme added thus far…thanks.

  3. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Sure; try something like this:

    .main-navigation .widget-area {
    	padding-top: 22px;
    }
    
    .main-navigation .widget-area a {
        display: inline-block;
    }
    
  4. 7 years, 1 month ago Jo-Anne Roche-Ross

    …something is still not quite right. This is all of the code in the child theme…including your above code. Can you look to see if you see any errors? Thanks….

    /*
    Theme Name: Vantage Child Menu
    Author: SiteOrgin
    Template: vantage
    Version: 1.0
    */

    @import url(“../vantage/style.css”);

    .main-navigation .widget-area {
    padding-top: 22px;
    }

    .main-navigation .widget-area a {
    display: inline-block;
    }

    @media screen and (max-width: 960px) {
    .site-navigation .widget-area {
    position: absolute;
    top: -30px;
    right: 5px;
    }
    }

  5. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Change your entire child style.css contents to:

    /*
    Theme Name: Vantage Child Menu
    Author: SiteOrigin
    Template: vantage
    Version: 1.0
    */
    
    @import url(“../vantage/style.css”);
    
    .site-navigation .widget-area {
    position: absolute;
    right: 5px;
    top: 0px;
    }
    
    .main-navigation .widget-area a {
    display: inline-block;
    }
    

    If you want to push the icons down a little you can add pixels to:

    top: 0px;
    
  6. 7 years, 29 days ago Jo-Anne Roche-Ross

    No….this did not work. It totally messed up my site. It made the menu go vertical and totally messed EVERYTHING else up. I tried to put the previous code back, but no luck. So then I totally deleted the vantage folder and uploaded the backup I had from 2 days ago and nothing… it’s still messed up…please help!!! ….. how do I get rid of the child theme. Normally I just go and find the file but I am not seeing it. Is it labeled differently? I think getting rid of the child theme and forgetting the icons is what I will have to do. At this point I will for go it just to get my site back. :( Please help

  7. 7 years, 26 days ago Andrew Misplon Hi, I Work Here

    Sorry to hear you ran into trouble. If you’re using a child theme and things go awry, the easiest way to recover is to login to your server via FTP OR hosting file manager and go to /wp-content/themes/ and locate the “vantage-child” folder. Delete it.

    The problem right now is the style.css file in your child theme. The import line looks like this:

    @import url(“../vantage/style.css”);
    

    Sincere apologies for the hassle. If you look up you’ll see the CSS I provided has non-plain text inverted commas. Once printed out they look like the above text. So to fix, change your @import line to:

    @import url("../vantage/style.css");
    

    Hope that helps.

  8. 7 years, 22 days ago Jo-Anne Roche-Ross

    Hi- I don’t see a “vantage child” folder. Are you able to give me your email and I can set you up and you can go in and find it and delete it? I just don’t see anything with child attached to it….thanks

  9. 7 years, 22 days ago Jo-Anne Roche-Ross

    Hi – Finally found the folder… under a different path. I deleted it and it did nothing…. so I will have to delete the whole thing and start all over again.

  10. 7 years, 22 days ago Andrew Misplon Hi, I Work Here

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  11. 7 years, 21 days ago Private Message - Jo-Anne Roche-Ross

    This is a private message.

  12. 7 years, 21 days ago Private Message - Andrew Misplon Hi, I Work Here

    This is a private message.

  13. 7 years, 21 days ago Andrew Misplon Hi, I Work Here

    Wow! Some wild things just happened in the admin that I’ve never seen before. I clicked on Appearance > Editor, it said the theme didn’t exist. Went to Appearance > Themes, checked that vantage-child was activated. Clicked Appearance > Editor again. WP switched over to 2015 and vantage-child is gone. I’ve never seen this happen before. I’ve activated Vantage parent so your site looks ok. Would you perhaps like to send me FTP details so I can check on the child theme on your server? Hopefully it’s still there.

    Can you give me info on what was in your child theme? Thanks.

  14. 7 years, 20 days ago Private Message - Jo-Anne Roche-Ross

    This is a private message.

  15. 7 years, 20 days ago Andrew Misplon Hi, I Work Here

    Would you like me to re-install the child theme for you? The error last time was caused by a snippet I sent with incorrect characters in it. Apologies again for the hassle. I’d be happy to re-look at this for you.

  16. 7 years, 19 days ago Jo-Anne Roche-Ross

    Yes, that would be great… thank you. :)

  17. 7 years, 19 days ago Andrew Misplon Hi, I Work Here

    Thanks. You can check now.

  18. 7 years, 18 days ago Jo-Anne Roche-Ross

    Yes, that looks great… Thank you very much!! Have a great day!!

  19. 7 years, 18 days ago Andrew Misplon Hi, I Work Here

    For sure :) You too.

    All the best.

  20. 6 years, 11 months ago Private Message - Jo-Anne Roche-Ross

    This is a private message.

  21. 6 years, 11 months ago Support Assistants Hi, I Work Here

    Hi Jo-Anne

    Check now, please.

    If you remove the widgets from Appearance > Widgets > Menu, the social icons in the menu area should automatically be removed.

  22. 6 years, 11 months ago Jo-Anne Roche-Ross

    Looks much better thanks. :)

    The other thing I meant to mention is when the child theme was installed it messed up my fonts, which I played around with to fix, but, the only thing I can’t edit with regard to font is on the home page is the ‘circle icon’ widget. Before the child theme is was ok, but now the font has gone smaller and bold. I need it to look like it used to before the child theme…many thanks for your help.

  23. 6 years, 11 months ago Support Assistants Hi, I Work Here

    We’ve added the following to AppearanceCustom CSS:

    /* Circle Icon Heading */
    
    .widget_circleicon-widget .circle-icon-box h4 {
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 20px;
    }
    
    /* Circle Icon Text */
    
    .widget_circleicon-widget .circle-icon-box p.text {
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 16px;
      line-height: normal;
    }
    
    /* Circle Icon More Link */
    
    .widget_circleicon-widget .circle-icon-box a.more-button {
      font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
      font-size: 16px;
    }

    Edit as required :)

  24. 6 years, 10 months ago Jo-Anne Roche-Ross

    That looks so much better!! Thank you. The only other thing was I had been trying to reduce the size of the footer. I tried to make changes in Custom CSS but did not get anywhere with it and was wondering if it was due to the child theme. I just wanted the footer to be smaller… about half the size.. ish. Thank you.

  25. 6 years, 10 months ago Support Assistants Hi, I Work Here

    For the footer, you can either:

    1. Set a min-height for your content container:

    /* Main Container */
    
    #main {
    	min-height: 500px;
    }
    

    Adjust as required. Or

    2. Change the body background color:

    /* Body */
    
    body {
      background: #fcfcfc !important;
    }

    Which will show the true size of the footer.

  26. 6 years, 10 months ago Jo-Anne Roche-Ross

    I don’t seem to be getting anywhere with that code… I played around with the numbers ie: from 500 to 200, 100, 50 and 0. The other one I changed the color but didn’t see any difference. Is it because of the child theme?

  27. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Reducing the min-height below the demo value of 500 usually wouldn’t do anything, you’d want to increase it. What page are you trying to reduce the appearance of the footer size?

  28. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – I just am not getting it…can`t seem to get anywhere with it. I just wanted the footer, for the whole website, to be about a third smaller in height. (grey area at bottom of website).

    The other thing is that as stated above, about the circle icon text` on the home page. It`s great that the text size is bigger but the font is still looks bold. It has something to do with the child theme. It was fine before that. It did the changing of the bold and changed the font style to the whole website but for a lot of it I use Site Origin Editor`, and instead of using paragraph for the paragraphs, I have to use a heading for the paragraph, with removes the bold look. (yet in the actual editor it makes it look bold which is just the opposite to what you see on the live part of the website. It seems to make things the opposite). The only problem is that with the circle icon widget there are no options to play with for the fonts, like in SO Editor). Is there some sort of coding that can fix this. If you look at the webpage, it does not look very good, esp. when you go down the page and see the difference. Thanks…

  29. 6 years, 10 months ago Jo-Anne Roche-Ross

    To add to the above note… I figured out how to fix the ‘circle icon text’ issue, but still have had no success with the footer issue. Thanks…

  30. 6 years, 10 months ago Support Assistants Hi, I Work Here

    The content container min-height is working. Check this page for example: http://www.graceunlimited.ca/design/about-3/. If you remove the min-height rule from your Custom CSS, the footer will appear larger.

  31. 6 years, 10 months ago Support Assistants Hi, I Work Here

    To best see this rule in action, create a test page, add a single line of content. Check the result. Then, go to Appearance > Custom CSS and remove the min-height: 600px; rule.

  32. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – I see now what you are saying…guess it’s as small as it going to get then. Not a biggie, just would have preferred it smaller but again, can live with it. Thanks so much!!

  33. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Thanks for your understanding. All the best.

  34. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi with regard to the main part of the post about social media icons. A custom made child theme was made which was great, but it is not responsive. I can only see a hint of the edge of the FB icon and non of YouTube. On my laptop nothing, and phone nothing. The only way I can see it is if I reduce the page size well below 100%. Is there code that could fix this? Thank you.

  35. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Change the widget area CSS rule in Custom CSS to the following:

    .site-navigation .widget-area {
        color: #fff;
        font-size: 13px;
        position: absolute;
        right: 0;
        top: 40px;
    }

    Add the following:

    .site-navigation ul > li:last-of-type {
    	margin-right: 100px;
    }

    Tweak the 100px value as required.

  36. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – That certainly helps line it up on the same level of the text in the menu but… it throws my picture below off. I have lost about an inch (you can see with the light greyish area of the bottom of the photo). Then if you scroll over the menu list you will see that it has thrown that way off. This is the way it should be.

    Home | About | Events | Media | Giving | Contact
    Our Pastor Calendar Video Giv.Online ContactUs
    Location Audio Volunteteer
    Stmt of Faith

    The other thing is that as far as the Social icons being level with the menu text, it looks good on the desk top and smart phone but on the laptop the menu text drops down so that ‘contact’ is on the next line in the menu and the menu goes to double the size and then the social media icons go on top of ‘giving’.

    Hope you can help :) …thank you.

  37. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Thanks for your feedback. At this point it might be worth looking at the Menu Icons plugin vs our child theme. We do our best to assist with customization requests that are small, we gave this a go but, as you’ve mentioned there are responsive challenges. If we inserted the icons as part of the menu they would behave a lot better.

  38. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Here we go: http://www.graceunlimited.ca/design/. The responsive issues should now be resolved as the icons are menu items and will move with the rest of the menu. You can edit the icon size and other settings from Appearance > Menus, click on the custom link for each icon and then click on the icon itself to make changes.

  39. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – Thanks for all of your efforts!! :) … When I mouse over the menu icons as you can see most of them are not lined up and double the width. The weird thing is that, it seems that if there is more than one page below, the second menu item (page) is messed up but the last one is lined up, but, the box itself is double the width. (if you mouse over ‘giving’ ‘media’ and ‘about’). I am really sorry for all the trouble this has caused. I agree that it may be better just taking the social media icons off and child theme off. The only problem is when I took the child theme off by deleting the folder it messed up the whole website. (not sure if this is andrew or not, but if not, he tried it – see above and he too saw how it messed it up.) Anyhow, at this point we can do the easiest fix. If that means taking off the social media icons then lets do it… and the child theme, same thing. But I would need you to do it so that you can see the issue and fix whatever the child theme has done because I have never experienced deleting a file and not having it resolve the issue. Your thoughts? Thanks…

  40. 6 years, 10 months ago Support Assistants Hi, I Work Here

    You can continue using the child theme, there isn’t any problem with leaving it as is.

  41. 6 years, 10 months ago Support Assistants Hi, I Work Here

    No problem.

    The social icons are perfectly lined up on our side. Please, try clearing your browser’s cache and try again. The social icons are wider because they now have the same padding as regular menu items. If you want to reduce that you can add the following to Appearance > Custom CSS:

    #page-wrapper li#menu-item-941 a,
    #page-wrapper li#menu-item-942 a {
    	padding-right: 10px;
    	padding-left: 10px;
    }

    Adjust as required.

    To prevent any two line menu behaviour, go to AppearanceTheme Settings and change the Mobile Menu Collapse to 1055.

  42. 6 years, 10 months ago Jo-Anne Roche-Ross

    … oh, sorry you thought I was talking about the social media icons. I am actually talking about the menu listing. If you put your mouse over ‘about’, ‘media’, and ‘giving’… do you see when the menu listing drops down it’s all messed up. It does this after you made the last changes to fix the social media issues. It has the same effect on the laptop as well. (I cleared browser cache) thanks…

  43. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Apologies. Check now, should be fixed.

  44. 6 years, 10 months ago Jo-Anne Roche-Ross

    Awesome!!!!! :)

    Just have 2 general questions.

    1) What would you advise me to use for a calendar that works with Google calendar? Or just one that is responsive and would work with this vantage template?

    2) What widget/plugin would I use for accepting financial donations? I see alot of Woo Commerce. I am not selling anything, just accepting donations but need a drop down menu of what the donation would be for. (ie: mission, general fund, guest speakers, and other – which would have to filled in). Again, something that would be responsive and work with this, Vantage template.

    Thanks,

  45. 6 years, 10 months ago Jo-Anne Roche-Ross

    This isn’t the first time I have had some really weird stuff gone on but…What’s going on with the website?? I walked away after you helped me, came back and refreshed the page and now the menu has gone double the size. Then I just went in to the ‘appearance’ and normally you would have tabs along the top, and then would click on each one etc. but now all tabs are gone and everything is in one long list?? This isn’t the first time I have had some really weird stuff gone on but do you know what code affects the menu? Thanks

  46. 6 years, 10 months ago Support Assistants Hi, I Work Here

    WordPress 4.4 unfortunately broke our settings tabs. We’re working on an update as we speak. We’ll have that released ASAP. Apologies for the hassle.

  47. 6 years, 10 months ago Support Assistants Hi, I Work Here

    1) What would you advise me to use for a calendar that works with Google calendar? Or just one that is responsive and would work with this vantage template?

    You can embed a Google Calendar in a page via the Text tab or via a Text widget.

    https://support.google.com/calendar/answer/41207?hl=en

    2) What widget/plugin would I use for accepting financial donations? I see alot of Woo Commerce. I am not selling anything, just accepting donations but need a drop down menu of what the donation would be for. (ie: mission, general fund, guest speakers, and other – which would have to filled in). Again, something that would be responsive and work with this, Vantage template.

    I’d use PayPal for this.

    https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=merchant%2Fdonations

  48. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – Thanks for the reply.

    You mentioned that “WordPress 4.4 unfortunately broke our settings tabs. We’re working on an update as we speak. We’ll have that released ASAP. Apologies for the hassle.”

    So it must have effected what you did with regard to the menu? You fixed it so that it was a regular width but now it went to double the width? How can this be fixed? Thanks.

  49. 6 years, 10 months ago Support Assistants Hi, I Work Here

    The update affected our settings page only (AppearanceTheme Settings), it broke the tabs, nothing else.

  50. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Your menu, including the logo, is 1080px wide, that’s the standard width for Vantage content. What are you looking to change? I’m not quite following your question. Thanks.

  51. 6 years, 10 months ago Jo-Anne Roche-Ross

    Sorry, width is fine but the height now looks to be about double the size. Thanks…

  52. 6 years, 10 months ago Support Assistants Hi, I Work Here

    In Custom CSS you have:

    Control the logo top/bottom padding:

    #masthead.masthead-logo-in-menu .logo {
        padding-top: 43px;
        padding-bottom: 43px;
    }

    After that, insert the following to maintain the drop down menu item padding:

    .main-navigation ul ul li a {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    Finally, go to Appearance > Customize > Theme Design > Menu > Menu Padding and use that setting to control the menu height.

  53. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi – I tried some of what you suggested however, am not quite getting it right. The menu listing itself has gone to the top on the menu, and the social media icons dropped to the next level within the menu. Also if you mouse over the menu listing it does not line up properly… what am I missing? Thanks…

  54. 6 years, 10 months ago Jo-Anne Roche-Ross

    Hi- Not sure if the last note went through or not so pls forgive me for sending it again… The only two issue that are left are:

    1) The menu text has gone up to the top of the menu bar (desktop), and the social media icons have gone to the next line in the menu, and the menu drop down is also been thrown off.

    2) Have no idea why, but if you look at the home page you will see the ‘circle icons’. When the child theme was put on, it made the font smaller and bold. You went in to custom CSS and made some changes and I also added the font size to be changed and the font weight to be ‘normal’. That worked. For some reason, and I have no idea why because I had not touched it but the font has gone smaller again and bold. I am wondering if if has something to do with the last bit of code you had me to put in for the menu??

    If I can get these two things fixed, I can make the site live… thank you so, so much in advance.

  55. 6 years, 10 months ago Support Assistants Hi, I Work Here

    There were CSS errors in your Custom CSS. Take a look now and re-test. Thanks.

  56. 6 years, 10 months ago Jo-Anne Roche-Ross

    Great!! Thanks so much… just one more question. What code affects the width of the drop down menu items. I would like to adjust them to be less wide. Thanks.

  57. 6 years, 10 months ago Support Assistants Hi, I Work Here

    Sure.

    You can try locating the rule that starts with the selector:

    #masthead .main-navigation ul ul li a

    Try adding to that rule:

    max-width: 100px;

  58. 6 years, 10 months ago Jo-Anne Roche-Ross

    Awesome!!! You guys are great… if not for your assistance I would not have a website!! Thank you so much for what you do!!… many blessing to all of you!!! … Jo-Anne

  59. 6 years, 10 months ago Support Assistants Hi, I Work Here

    For sure :) All the best.

  60. 6 years, 9 months ago Chefito

    Hi good afternoon,

    I have just bough a premium version of the software (vantage). I have done a few posts my Vantage web site. All its looking pretty fine , but the media icons show , even if I unable them in the theme settings.

    I have also unable them in each post or page, but there are still showing and WHEN IT GETS WORSE, once you UNABLE THEM in the the settings, it doesn’t allows you to do the saving. Comes a Screen a type of error Saying: [Are you sure you want to do this]….but doesn’t show any tick box or button to say yes.
    PLEASE , I need help. Thanks for your time and consideration, Adrian Schafer

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More