Primary menu & fb icon

• 

  9thartwave · Member · Jun 3, 2016 at 8:50 am

  • Copy link
  • Add topic to favorites

  Hi, I just deleted an item from my primary menu (exhibitions) and have lost the fb icon (although the link is there, left of the twitter one).

  Moreover, how can I extent a bit the primary menu, so as to reduce the gap with the social media icons?

  thanks

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

• 

  siobhyb · Member · Jun 3, 2016 at 11:35 am

  • Copy link

  Hi there,

  Hi, I just deleted an item from my primary menu (exhibitions) and have lost the fb icon (although the link is there, left of the twitter one).

  I’m being led to an error when visiting the image URL that’s referenced in the CSS for that icon: http://www.concept-simple.com/images/facebook-logo.png.

  Could you upload a new icon to your Media Library? You can then replace the image URL in the following custom CSS snippet:

  #menu-item-428 a {
  	background: url('http://www.concept-simple.com/images/facebook-logo.png') no-repeat scroll 0 0 rgba(0,0,0,0);
  	color: rgba(0,0,0,0);
  }

  Moreover, how can I extent a bit the primary menu, so as to reduce the gap with the social media icons?

  You could move the menu over to the right using the following snippet:

  ul#menu-basic {
      padding-left: 50px;
  }

  Increase/decrease the value of padding-left to your liking, and let me know how you get on with that.

• 

  9thartwave · Member · Jun 3, 2016 at 11:44 am

  • Copy link

  I do replace it, but the image does not seem to work for some reason. I have tried 4 different ones

• 

  9thartwave · Member · Jun 3, 2016 at 11:46 am

  • Copy link

  how can I move the social media menu on the left and/or increase the spaces between the main menu options (bio, news, works, etc)

  thanks

• 

  siobhyb · Member · Jun 3, 2016 at 4:15 pm

  • Copy link

  Hi there,

  I do replace it, but the image does not seem to work for some reason. I have tried 4 different ones

  Could you try adding background-size to your CSS snippet? Like so:

  #menu-item-428 a {
  	background: url('https://panosantonopoulosdotcom.files.wordpress.com/2016/06/facebook-logo.png') no-repeat scroll 0 0 rgba(0,0,0,0);
  	color: rgba(0,0,0,0);
  	background-size: 25px 18px;
  }

  The first value of background-size defines the width of your image and the second the height. Feel free to experiment with them depending on the size of your image.

  how can I move the social media menu on the left and/or increase the spaces between the main menu options (bio, news, works, etc)

  Moving the social menu to the left is possible but would take time and testing across multiple devices to get right. If you let me know a little about your main aim, I can see if I can help in some other way.

  Is your main aim to get the main menu to take up the whole width of the screen? Or something else?

  You can increase the spacing between your menu items using the following CSS:

  .menu li {
      padding-right: 45px;
  }

  The above snippet adds space/padding to the right of each of your menu items. You can increase/decrease as you wish.

• 

  9thartwave · Member · Jun 4, 2016 at 12:32 am

  • Copy link

  thanks!!

• 

  siobhyb · Member · Jun 5, 2016 at 9:50 am

  • Copy link

  You’re most welcome. :)