Docs

[Lutslana]

Dear X-Team,

in the right of the logo and in the left of the navigation I would like to insert formated text. What is the shortest and cleanest way for that?
(Integrity, Inline Layout)

Kind regards,
Kirill

[Rahul]

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.

[Lutslana]

This reply has been marked as private.

[Joao]

Hi There,

Please have a look on this thread:

https://community.theme.co/forums/topic/logo-and-text-in-the-header/

Hope it helps,

Joao

[Lutslana]

Hi Joao,

I have already searched the board and tried several solutions. I have also tried the thread you suggested.
No one worked out for me.

Your logo will show up as text by default. Alternately, if you would like to use an image, upload it under the “Logo – Image” section below, which will automatically switch over. Logo alignment can also be adjusted under the “Logo – Alignment” section.

So the task and question for me is how to make both visible. Or use the logo as the background for the text and move the text to the right.

Kind regards,
Kirill

[Lutslana]

This reply has been marked as private.

[Thai]

Hi There,

#1] 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>
    </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' ); ?>
          <div class="navbar-text">Your text will go here</div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

#2] After that add the following CSS under style.css file locates in child theme:

.navbar-text {
    float: left;
    margin: 12px;
}

Hope it helps 🙂

[Lutslana]

Hey Thai,

thank you, it works!

Kind regards,
Kirill

[Christopher]

You’re welcome.

[Author]

Posts