Docs

[ichibanj]

Hi there, I would like to have both a logo and text appear at the top of this site: http://masseyagents.ac.nz

Desktop – visual mockup of how we’d like the header to look attached. Both text and header need to be links to homepage.
Mobile – hide the logo and just have text only, centred.

Thanks!

[Friech]

Hi There,

Thanks for writing in! This would require a header template modification. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Cheers!

[ichibanj]

This reply has been marked as private.

[Friech]

Hi There,

Thanks, 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.

Then on your child theme navigate to this directory \x-child\framework\views\global\ create a file named _navbar.php in there and paste the code below on it.

<?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="brand-logo right"><img src="http://masseyagents.ac.nz/wp-content/uploads/Massey-logo.jpg" alt="Massey University" /></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; ?>

And then add this under Custom > Global CSS in the Customizer.

.brand-logo {display: none;}
@media (min-width:  980px) {
    header.masthead-stacked .x-brand {
    float: left;
    margin-top: 50px;
}
.brand-logo {
    display: block;
    width: 300px;
}
}

Hope it helps, Cheers!

[ichibanj]

Thanks for this excellent help!

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

Thank You.

[Author]

Posts