Header Logo left, Menu center, right Social Media alignment possible?

Hey,

I had a plan for a header somewhat like this:

Is that possible? And how? I can’t find the options for that.

Thanks for the help!

Hello Emi,

Thanks for writing in! At the moment, the default header will display the inline and the stacked display of the logo and the menu. Having to display it like the screenshot above will require a little bit of customization of your header. Please keep in mind that custom development is beyond the scope of our support. We only cover getting your site set up, bug fixes and minor cosmetic changes.

To get you started with, because what you are trying to accomplish requires a template customization, we would highly to suggest that you use 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.

Once you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new 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">
            
            <div class="x-column x-sm x-1-3">
                <?php x_get_view( 'global', '_brand' ); ?>
            </div>

            <div class="x-column x-sm x-1-3">
                <?php x_get_view( 'global', '_nav', 'primary' ); ?>
            </div>

            <div class="x-topbar x-column x-sm x-1-3" style="background-color: transparent;">
                <?php x_social_global(); ?>
            </div>

        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

3] Save the file named as _navbar.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/

You will need to create the folder path in your child theme since it does not exist yet.

The code above is just a mere guide to get you started with your customizations. This isn’t complete yet. You may need further adjustments to achieve the final look as you have illustrated in the screenshot.

Hope this helps.

1 Like

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