Social Media Icons on navbar fixed left

On my website I am using the header/navbar fixed left, and I wanted to insert social media icons on the bottom of the menu. Is there a way I could do that with Theme X?

Hi @julianakatz,

Thanks for writing in.

You will have to have the child theme installed and activated first then create the following path directory: wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/ then add the _navbar.php in the global directory and add this code in the file:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
		  <?php x_social_global(); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

I have added this in the code: <?php x_social_global(); ?>

So that there will be social icons for fixed left and right menus.

Hope it helps.

Let us know how it goes.

Thanks.

Perfect! That’s exactly what I wanted!
I adjusted the sizing and the padding to stay the way I wanted. Now the only issue is when the screen gets smaller, the icons get out of place, is there a way to fix that? Preferably let them stay inside the hamburger menu.

Also, can I replace one icon with a Yelp icon?

Thank you.

Hello There,

The social icons is not part of the submenu. It is impossible to reposition the social icons inside the hamburger menu. You will have to re think of how it would look like in smaller screens. If you want it to look like this: http://prntscr.com/k1131i
Then you can make use of this custom css:


@media(max-width: 767px){
    .x-social-global {
        width: auto !important;
        display: block;
        clear:  both;
        text-align:  right;
        margin-right:  0;
    }    
}

To add a Yelp Icon in the social icons, please check out this thread: https://theme.co/apex/forum/t/adding-a-yelp-icon-to-the-social-header/8260/2

Hope this helps.

Thank you!

You’re more than welcome, glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.