Docs

[adamzinger]

I’m preparing to design my 12th site in X. I love the theme and the level of support. What I would like is more options when it comes to the header (anyone else feel this way too?). At the moment I’m limited to logo to left and navigation to the right or centralised logo on top and centralised navigation underneath.

I’d like more options. For example, the site I am currently planning would benefit from logo left aligned with navigation underneath which needs a lot more horizontal space. I’d also like a strong phone number presence and email address right aligned on the same level as the logo.

Are there plans to improve header options?

Are there any workarounds until this is available?

Thanks,
Adam

[Thai]

Hi Adam,

Thank you for your feedback.

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.
Then navigate to your child theme’s /framework/views/global directory create a file named _navbar.php and paste the code below:

<?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 class="right-info">
          <ul>
            <li><a href="#">0988 242 646</a></li>
            <li><a href="#">[email protected]</a></li>
          </ul>
        </div>
      </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' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then add the following CSS under Customizer > Custom > Global CSS:

.masthead-stacked .x-brand {
    float: left;
}
.right-info {
    float: right;
}
.right-info ul {
    list-style: none;
    margin: 0;
}
.right-info ul li a {
    display: block;
    text-align: left;
}

Hope it helps 🙂

[adamzinger]

I’ll give that a go when I come to developing.

Thanks!

[Paul R]

You’re welcome! 🙂

[Author]

Posts