Facebook icon besides the menu

Dear sir,

I want to put the Facebook icon the the right most side of the header menu, after the WPML language switcher. How can I do that? I am a newbie of Pro and would like to see if there is any reference.

Cheers,
Ken

Hi Ken,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

Hi Jade,

The URL is in the security note. I have set the maintenance mode so please let me know if you need to see the actual page.

Attached are the header design I would like to build. They include the mobile header which I also want to see where can customize in Pro and also better if there is any sample to follow up.

Cheers,
Ken

Hi There,

The site is in under construction, we can’t view it. You can upload your screenshots to a file sharing site (e.g Dropbox, Google drive) and send the links via Secure Note.

The Pro has the Social Element which you can add to your header/footer and linked it to your social media page.

This is a good head start page to learn how the elements on header/footer builder works.

https://theme.co/apex/forum/t/pro-using-partials/213

Cheers!

Thanks for the reply. I just upload the design to dropbox and I will pose the links in Secure Note.

I know that social element can be placed in the header / footer area but they are not in the position I want. I want it exactly at the right most side of the main menu but I can’t find any option to rearrange the location. You can see my idea in the design ‘menu closed.png’, while the existing menu in the website is ‘existing home page.png’.

I also have another question that on mobile menu. I need to rearrange the mobile menu position like ‘menu mobile.png’. How can I do that?

Are all customization need to be done in Header / footer builder? It is because I can’t find any method to customize the menu in normal template customization function. Actually in this stage the desktop version menu is good enough, I just need to put the facebook icon at the right hand side per my client request.

Cheers,
Ken

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

You will need to do the customization yourself as it is out of our support scope.

Create _navbar.php file under YOUR CHILD THEME -> framework > legacy > cranium > headers > views > global and add this code in there:

<?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>
      <?php x_social_global(); ?>
    </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' ); ?>
        </div>
      </div>
        <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Now whatever link you add to X > Launch > Options > Social will show at the end of the Navigation Bar.

To be able to further assist you regarding the mobile menu question kindly get back to us with a way that we can see the front end of your website live and see the code so that we can check and try to suggest a solution.

Thank you.

Hi Chris,

I have added the codes you suggested but still can’t see the facebook icon. However, we want to use the header builder to build the menu so maybe just leave it first.

One question, can I assign different menus to different pages of mobile version as well?

Cheers,
Ken

Hi there,

If you are using the Header Builder, you can add a different Navigation Collapse item for example and assign a different menu to it. Then you can hide it for desktop devices. That way you can have another menu than the inline navigation element which will show for desktop view.

To show/hide elements in different views you can use the customize tab of each element options to access the screen.

Thank you.