Docs

[watue]

I am trying to put Search to the far right of my topbar. In Customize, I have the Header Widget Areas set to 4. However, I don’t see how to add a widget to the topbar. I see how to add text to the topbar, but not a widget. How can I add the Search widget to the topbar?

Thanks.

My login information is in a private post below.

[watue]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add the Widgets from Appearance > Widgets and you need to place on the Header widget areas.

Let us know if you still face any issue.

Cheers!

[watue]

That is what I did before posting, but it still does not appear on the topbar. As a test to ensure I was doing it correctly, I added Search to the footer and that worked, but it is not showing on the topbar.

[Nabeel A]

Hi again,

First, please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-topbar p.p-info {
   display:block;
   float:left;
   width:auto;
   line-height:46px;
}

.x-topbar .x-social-global {
   display:block;
   float:left;
   width:auto;
   line-height:46px;
}

.x-topbar .topbar-search {
    display:block;
    float:right;
    padding-top:6px;
}

.x-topbar .topbar-search .search-query {
   max-width:190px;
}

Then create a new file _topbar.php and paste the following code inside:

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
	  <div class="topbar-search"><?php get_search_form(); ?></div>
    </div>
  </div>

<?php endif; ?>

Save it and upload it to /x/framework/views/global/ directory via FTP.

Let us know how this goes!

[watue]

Thank you. I’ll try this and let you know.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts