Docs

[omkar13]

Hi Xtheme,
I am not sure how to add my business contact information on right corner of logobar. Can you please help me with step by step instructions as I don’t have prior experience in customizing a template.
I have activated X Child theme but not sure where I have to do the customization!
Please Note— I don’t want my business contact number on top bar.

[omkar13]

PFA eddited image how i want in my navbar

[Paul R]

Hi,

To achieve that, create file _navbar.php in wp-content/themes/x-child/framework/views/global
and copy the code below into that 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 class="header-right" style="float:right;">
        <ul style="list-style-type: none;">
        <li>0921 8927 020</li>
        <li>0927 8927 020</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; ?>

Hope that helps

[omkar13]

Thanks!
I can see the contact numbers now, but how to edit the font styles and sizes if I want to?

[omkar13]

plus how to add phone icon before the contact number and make the number clickable so visitors can call through it?

Help much appreciated!

[Christopher]

Hi there,

Please update your code to :

<?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="header-right" style="float:right;">
        <ul style="list-style-type: none;">
        <li><a style="font-size:15px;" href="tel:1-847-555-5555"><i class="x-icon-phone" data-x-icon=""></i>0921 8927 020</a></li>
        <li><a style="font-size:15px;" href="tel:1-847-555-5555"><i class="x-icon-phone" data-x-icon=""></i>0921 8927 020</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; ?>

Hope it helps.

[omkar13]

Cheers! Your support is very helpful! I ll get back if I need further help.

[Paul R]

Thanks! Have a nice day! 🙂

[omkar13]

Hi X Team,
I have added you given code and updated in my file system. Everything is looking great expect the logo is not centered in the middle. Also, I want to add two icons on the navbar beside contact numbers. How to achieve that?

[Joao]

Hi There,

Would you mind sharing your URl so we can assist you with the issue?

Thanks

Joao

[omkar13]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media only screen (min-device-width: 480px) {
.x-brand img {
margin-left: 150px;
}
}

Hope it helps

Joao

[omkar13]

Doesn’t change much! I changed margin-left value also but it doesnt show any effect.

Also, how to add icons in navbar? I have attached the icons in previous conversations.

[Friech]

Hi There,

Remove the float: right; styling you applied on header-right. And add this on your custom css on customizer instead.

@media (min-width:  481px) {
	.header-right {
	display: inline-block;
    position: absolute;
    right: 6%;
}
}

You can add an custom link to your menu and use your icon as the Navigation Label.

<img src="ICON URL HERE" />

Hope it helps.

Cheers!

[omkar13]

Cheers! Thanks you!

[Author]

Posts