Social media icons in the header possibility?

Is there any way to add social media icons to the header and call to action buttons like “apply” “email” etc to click on from the header?

Hello there,

If you want to add social media profiles icons on the main menu line, you would probably follow this instruction.

Do you want also add CTA buttons on main menu line?

Regards,
Kharis

I am not sure what you mean by CTA buttons? but maybe.

I would like to add some buttons like “apply” “sign in to forum” “post jobs” and “store” to the header where my social media is. (also to centre my social media when it is on mobile)

Hello there,

Add social profile icons

Create custom menu for your social profiles link in Appearance > Menus. Choose “Custom Links” type of menu item. On “Display locations” under “Menu Settings”, activate Header social. Save menu.

Then visit Appearance > Customize; go to “Sydney Pro: Extra options” > “Header contact info”; and enable “Activate the header contact info?”.

Add extra CTA link

Add this PHP snippet to a child theme’s functions. Or use Code Snippets plugin if you aren’t running any child theme.

    add_filter('wp_nav_menu_items', 'sydney_pro_child_top_cta', 10, 2);
    function sydney_pro_child_top_cta($items, $args){

      $link = 'https://yoursite.com/page';
      $button = '<a href="'.$link.'" class="roll-button">Get a quote</a>';

      if ($args->theme_location == 'social') {
          $items .= '<li class="top-menu-cta">'.$button.'</li>';
      }
      return $items;

    }

Regards,
Kharis

thank you!

Is there a way to add a second button and change the size a little

also make the top bar fit on one line on mobile phone. Right now it is on 3 separate lines. It takes up a lot of space before gettting to my page

Hello there,

To add two buttons, replace the code I suggested with this one:

    add_filter('wp_nav_menu_items', 'sydney_pro_child_top_cta', 10, 2);
    function sydney_pro_child_top_cta($items, $args){

      // Button 1
      $link1    = 'https://yoursite.com/page';
      $button1  = '<a href="'.$link1.'" class="roll-button">Get a quote</a>';

      // Button 2
      $link2    = 'https://yoursite.com/page';
      $button2  = '<a href="'.$link2.'" class="roll-button">Button 2</a>';

      if ($args->theme_location == 'social') {
          $items .= '<li class="top-menu-cta">'.$button1.'</li>';
          $items .= '<li class="top-menu-cta button2">'.$button2.'</li>';
      }
      return $items;

    }

To style with smaller font size and add space between the buttons, add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .header-contact .top-menu-cta {
      font-size: 11px;
    }

    .header-contact .top-menu-cta.button2 {
      margin-left: 10px;
    }

Regards,
Kharis


I uploaded it. It worked from your copy paste but after i tried changing the titles and url it doesn’t work.


Do you know if this is possible? The header looks great on computer but takes up too much space on phone

Hello there,

I visited your site and it seems like the custom jQuery code has been put off. Please put it back, so I can inspect and troubleshoot it directly.

Regards,
Kharis

Continuing the discussion from Social media icons in the header possibility?:

Hi Kharis,

I copy and pasted your code again but changed the button names and url. My header and footer disappeared after it
add_filter(‘wp_nav_menu_items’, ‘sydney_pro_child_top_cta’, 10, 2);
function sydney_pro_child_top_cta($items, $args){

  // Button 1
  $link1    = 'http://unitedstudy.co.uk/apply/';
  $button1  = '<a href="'.$link1.'" class="roll-button">Apply</a>';

  // Button 2
  $link2    = 'http://unitedstudy.co.uk/forum/';
  $button2  = '<a href="'.$link2.'" class="roll-button">ESL Forums</a>';

  if ($args->theme_location == 'social') {
      $items .= '<li class="top-menu-cta">'.$button1.'</li>';
      $items .= '<li class="top-menu-cta button2">'.$button2.'</li>';
  }
  return $items;

}

Where can i find thee jQuery. Will my header and footer return??

Hi,

How can I add social media icons to my header and footer at this site https://toptennisshoes.com/ ?

Thank you.

Nick

I just received help on this. You copy and paste that above into code snippets (a code plugin). It should then appear. You can then edit the position in the addition css on wordpress.

I would be interested to know how you managed your

  • [About Us, Contact Us Affiliate disclosure, Terms of service etc at the bottom of your footer?

Could i still have help on positioning this on mobile?

I would also like to position the computer view. the email left top. Social media centre top. Buttons right top

Hello @nickjohn,

In order to maintain this thread in good order, please create your own topic. Before doing so, read my reply on similar quesiton at Social media icons in the header possibility?.

Regards,
Kharis

Thanks karis.

Could i also have help on the positions of the header top bar on mobile and pc as asked above.

For pc.

Email (left margin) social icons (middle) buttons (right margin)

For mobile

Like the picture above

are you using wordpress?

If yes, then I am did this using widgets option

Let me know if you want to add in your site I will guide you with screenshot.

Nick

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .header-contact .header-contact-info {
        width: 210px;
      }
      .header-contact .header-contact-info .header-email {
        float: left;
      }
      .header-contact .social-navigation > div > ul {
        margin-left: -125px;
        text-align: left;
        position: relative;
      }
      .social-navigation li.top-menu-cta,
      .social-navigation li.top-menu-cta.button2 {
        position: absolute;
        top: 0;
        right: 130px;
      }
      .social-navigation li.top-menu-cta.button2 {
        right: 0;
      } 
    }

Regards,
Kharis

hi,

Thanks! i like the position on desktop but the position on mobile is still the same. like the picture above i sent ^^^^^ https://forums.athemes.com/uploads/db8325/original/2X/2/215a491b2a67088f1250ae9be7fc776fd1278b0e.jpeg

but is there a way to put in a shadow or something

to makee my social media icons look more visible?

Hello there,

Try adding this CSS code:

    .social-navigation li:not(.top-menu-cta) a {
      text-shadow: 4px 2px 6px rgba(5, 6, 6, 1); 
    }

Regards,
Kharis

Thanks kharis!

Last one. The header on mobile currently takes up way too much space. Could i change it to look like this?

it also says that the code may break your site. is there any issue?
.text-slider .maintitle,
.text-slider .subtitle {
text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8);
}

.header-contact-info a,
#mainnav ul.menu > li > a {
  text-shadow: 4px 3px 6px rgba(5, 6, 6, 1.6);    
}


.header-contact .top-menu-cta {
  font-size: 5px;
}

.header-contact .top-menu-cta.button2 {
  margin-left: 15px;
}

#masthead.fixed {
background-color: rgba(0,0,0,0.9);
padding: 10px;
}

.btn-menu {
line-height: 1;
}

#masthead.fixed .site-logo {
max-height: 55px;
}

.site-logo {
transition-duration: 0.5s;
}

@media only screen and (min-width: 1025px) {
  .header-contact .header-contact-info {
    width: 210px;
  }
  .header-contact .header-contact-info .header-email {
    float: left;
  }
  .header-contact .social-navigation > div > ul {
    margin-left: -125px;
    text-align: left;
    position: relative;
  }
  .social-navigation li.top-menu-cta,
  .social-navigation li.top-menu-cta.button2 {
    position: absolute;
    top: 0;
    right: 130px;
  }
  
		.social-navigation li.top-menu-cta.button2 {
    right: 0;
  } 
		
		    .social-navigation li:not(.top-menu-cta) a {

  text-shadow: 4px 2px 6px rgba(5, 6, 6, 1); 

}