Changing Social Media icon size in Top Menu

• 

  thepaneuropean · Member · Apr 28, 2017 at 10:29 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I am using the Outspoken theme, and trying to make the social media icons in my top menu as small as the text, so that they don’t make the menu bigger.

  This is my site- thepaneuropean.blog.

  I’ve been told that it’s a CSS issue, but I’m not an expert when it comes to code. So any help help/advice would be much appreciated.
  Thanks, Frank.

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 28, 2017 at 10:40 am

  • Copy link

  Hello @thepaneuropean,
  Try this CSS code to reduce the size of the social icon on the top menu bar:

  .social-icon i {
      font-size: 18px;    /*change this value if you like*/
      vertical-align: middle;
  }

  Hope this helps 🙂

• 

  otpidusprime · Member · Apr 28, 2017 at 10:42 am

  • Copy link

  Also, i noticed that you removed the black admin bar. Please make sure that you restore that, because we are not allowed to hide that.

  May I remove the Admin Bar, credit links such as ‘Blog at WordPress.com’, theme, font, or toolbar links?

  All WordPress.com users are required to maintain the Admin Bar (the dark bar that appears at the top of WordPress.com sites when logged in).

  The footer credit can be hidden if WordPress.com Business is active on a site. Please do not use CSS to hide or alter the credits if you do not have the Business plan.

  As stated here: https://en.support.wordpress.com/custom-design/#frequently-asked-questions

  Thanks! 🙂

• 

  thepaneuropean · Member · Apr 28, 2017 at 10:45 am

  • Copy link

  Legend, thank you. And – beginners question coming up – how do I add that code in? Is it just in between the /* */ in the ‘Additional CSS’ section? I tried that and nothing changed

  I’ll restore that now. Thanks a lot!

• 

  thepaneuropean · Member · Apr 28, 2017 at 10:46 am

  • Copy link

  Also, do you see on the theme example (http://outspoken.wpshower.com/) how the social icons remain even when you minimise the page? Do you know how they did that?

  Thanks!

• 

  otpidusprime · Member · Apr 28, 2017 at 10:59 am

  • Copy link

  how do I add that code in? Is it just in between the /* */ in the ‘Additional CSS’ section? I tried that and nothing changed

  Go to your site customizer and then, then click on the CSS tab to access the CSS editor.

  More information about it here:
  https://en.support.wordpress.com/custom-design/editing-css/
   

  Also, do you see on the theme example (http://outspoken.wpshower.com/) how the social icons remain even when you minimise the page? Do you know how they did that?

  I did not understand the question. Can you please elaborate what’s happening there and what are you trying to do?

  Thanks!