Social media menu


#1

Hi,

How can I get my social media icon on 1 centered lign at the bottom?

Also is there a way to place the social media icon at the top without having to remove the main menu?

my url is: www.madamwaff.com.au

Thanks


#2

Hello there,

Thank you for asking.

> How can I get my social media icon on 1 centered lign at the bottom?

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

#sidebar-footer ul#menu-social-media-menu{
  max-width: 200px;
}

#sidebar-footer ul#menu-social-media-menu li{
  display: inline;
  width: 30%;
  float: left;
  padding: 0 !important;
}  

> Also is there a way to place the social media icon at the top without having to remove the main menu?

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. In the “Scripts in header”, add the following CSS code.

#mainnav .menu{
  float: left;
}  
#mainnav .menu:first-child{
  width: 70%;
}

#mainnav .menu:last-child{
  width: 30%;
}  
  1. In the “Scripts in footer”, add the following jQuery code.
<script>
(function($){
      
    "use strict";
  
    var $manNavContainer = $('#mainnav > div');
    var $socialMenu = $('#menu-social-media-menu');

    $socialMenu.clone().appendTo( "#mainnav" );

 
})(jQuery);
</script>
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#3

Hi Kharis,

The social icons are now aligned but still not in center.

For the social icon at the top, unfortunately it didn’t work.


#4

Hello there,

> The social icons are now aligned but still not in center.

Could you please try the following CSS code?

#sidebar-footer #menu-social-media-menu{
  margin-left: auto;
  margin-right: auto;
}

#sidebar-footer #nav_menu-3{
  text-align: center;
}

#sidebar-footer ul#menu-social-media-menu{
  display: table;
}

#sidebar-footer ul#menu-social-media-menu li{
  display: inline;
  width: auto;
  margin: 0 10px;
}  

> For the social icon at the top, unfortunately it didn’t work.

Could you please try to update the previous code to the following?

<script>
(function($){
      
    "use strict";
 
    var $socialMenu = $('#menu-social-media-menu');

    $socialMenu.clone().appendTo( "#mainnav > div" );
 
})(jQuery);
</script>

If it didn’t give any changes, please keep the code remains. So I would able to do direct debugging from there.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#5

Hi Kharis,

unfortunately it still doesn’t work… i left it one.

Please let me know wgat sgoulf I do.

Thanks
Anne-Sophie


#6

Hello there,

Your code can’t be executed by that way. I guess you copied it from email. Could you please replace it with this one?

Let me know how it goes.

Warmest regards,
Kharis


#7

Hi Kharis,

Sorry nothing happens even by replacing with this one.


#8

Hello there,

Could you please confirm if you have inserted the code in the “Scripts in footer:” box?

Warmest regards,
Kharis


#9

Indeed, I forgot to add the script in the footer.
Now I can see the icons. They are on the left side at the begining of the menu. Is it possible to have them slightly smaller on the right end of the menu?

Sorry for being so anoying.

and last question: How can I make the menu font bigger?

Thank you so much


#10

Hello there,

> Is it possible to have them slightly smaller on the right end of the menu?

Go to Settings > Header and Footer Scripts. In the “Scripts in header”, add the following code.

<style>
#mainnav{
  position: relative;
  width: 100%;
}

#mainnav > div li:last-child{
  padding-right: 0;
}  

#mainnav .menu-menu-container{
  float: right;
  margin-right: 82px;
}  

#mainnav .menu-menu-container{
  width: 90%;
}

#mainnav #menu-social-media-menu{
  width: 82px;
  position: absolute;
  top: 0;
  right: 0;
}  

#mainnav #menu-social-media-menu li{
  padding: 0 5px !important;
}

#mainnav #menu-social-media-menu li a{
  font-size: 10px;
}

.site-header.float-header #mainnav #menu-social-media-menu li a {
  height: 24px;
  line-height: 24px;
}
</style>

Let me know how it goes.

> How can I make the menu font bigger?

Try to add the following code before the style closing tag </style> above.

#mainnav .menu-menu-container ul li a{
  font-size: 20px;
}  

Adjust the font size to meet your need.

Warmest regards,
Kharis


#11

It did work. Thank you very very much.

Do I Still need the the search box on the homepage, or can I remove it? I would like to remove it.

Also, eventhough I tried to remove the logo under customize, it still appears…anychance you may know why?

Thanks heaps


#12

Hello there,

To remove the search box, you can go editing your page, then remove the row which contains the widget search.

> Also, eventhough I tried to remove the logo under customize, it still appears…anychance you may know why?

I thought I should check it directly to your site admin area. Could you please give me a temporary access to go there so I can have a closer look? You can send the login credentials to my email kharisblank at gmail dotcom with the link to this thread.

Warmest regards,
Kharis


#13

Hello there,

Thank you for the login credentials.

Regarding the site logo issue which won’t be removed in the frontend,Could you please try to update the Sydney theme to latest version? I noticed that you are currently using the older one (v. 1.20).

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#14

Hi,

I have updated it but it still show up.


#15

Hello there,

Thank you for updating me.

I tried to switch the logo to logo.png, then removed it. Your logo is now completely removed.

Warmest regards,
Kharis


#16

Thank you very much