Changing code in _navbar.php file to add social links doesn't work

Leosblog · August 7, 2017, 9:25pm

Hi there,

as recommended, I copied the _navbar.php file into the child’s theme and changed the code according to earlier suggestions in the forum (for example: https://theme.co/apex/forums/topic/how-to-change-php-files/)

Although I followed all the steps, the social icons still don’t show up in my navbar. What am I missing? Can you help me find a solution for this?

Would love some tips and tricks on how to solve this problem.

Cheers

lely · August 8, 2017, 5:36am

Hi There,

There’s changes in the structure. _navbar.php file is now located here:
\wp-content\themes\x\framework\legacy\cranium\headers\views\global. To customize it, copy the file on the same folder on your child theme here: \wp-content\themes\x-child\framework\legacy\cranium\headers\views\global. Create the folder if it doesn’t exist. Then add the customize code as needed.

Hope this helps.

Leosblog · August 8, 2017, 6:33am

Hey,

thanks for the quick reply! Regrettably, I can’t find a folder named “legacy”. Anyway, I already found the _navbar.php file yesterday, the customized code just didn’t change the page’s appearance. Now I found that the social links are showing in the topbar which I had switched off.

Is there a way, I could place them in the navbar? I’d like them to be placed next to the menu.

Thanks in advance!

paul.r · August 8, 2017, 12:15pm

Hi,

You need to create those directories in your child theme

wp-content\themes\x-child\framework\legacy\cranium\headers\views\global_navbar.php

After that copy the code below into that 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' ); ?>
          <?php x_social_global(); ?>
        </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; ?>

Hope that helps.

Leosblog · August 8, 2017, 3:09pm

Hey Paul,

thanks for your suggestion! I followed all the steps, but it still doesn’t change the positioning of the social links.

I updated the theme, I copied the navbar into the child theme, I copied the suggested code and it still looks like above. What am I missing? I did all these changes on the FTP server, do I need to do something additionally or will it implement the changes in the website directly?

That’s the first website I’m constructing, maybe I’m making a basic mistake. If you have any ideas as to why it doesn’t work and what I could do about it, I’d be glad to hear them.

Thanks in advance!

friech · August 9, 2017, 10:02pm

Hi There,

Maybe you should not be doing a custom modifications for now. I suggest you use the FontAwesome icons code instead as your custom menu item’s Navigation Label (https://prnt.sc/67ufyv).

Facebook


Instagram


Youtube


Twitter


Pinterest


Google+


LinkedIn


Vimeo


Tumblr


SoundCloud


If you need other icons, please go here (http://fontawesome.io/icons/). Select the icon that you need, get the icon’s unicode and class name (https://prnt.sc/g66jr4)

Then supply it to the data-x-icon and class attribute respectively.

Keep in mind that we prefix our fontawesome class with x-icon- instead of the fontAwesome’s default fa-

Do not use custom codes from the old forum anymore as most if not all of those are for X version 4 and no guarantee that they would work in X5 or PRO.

Hope it helps,
Cheers!