[Felicity EParticipant]

Hi,
I’ve followed the thread here: https://community.theme.co/forums/topic/google-translate-flags-in-topbar-or-menubar/ to successfully ad Google translate to the topbar of my site. But I can’t get it to line up with the page content- it is floating to the absolute right. Can you please explain how to get it to line up with the menu?

I also want to include a search function alongside it. How can I achieve this as well?

dev site: lpps1.minkacreativestudio.com.au
X version: 4.6.4
Wpress: 4.7.2

Thanks

[Felicity EParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Felicity,

Would you mind giving us FTP credentials too?
Topbar container should align it by default. But then on your site, x-container class is set to be x-container-fluid. See this:http://screencast-o-matic.com/watch/cbenit6TI3

[Felicity EParticipant]

Oh, that is in the code supplied in the thread I mentioned above! I’ve removed it and updated as your video shows and it works perfectly! Thanks

How do I go about placing the search function from the widget sidebar alongside the translate function in the topbar?

[Felicity EParticipant]

This is what it reads now.

<?php

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

?>

<?php if ( x_get_option( 'x_topbar_display', 0 ) == 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="gtranslate" style="float:right;"><?php echo do_shortcode('[gtranslate]'); ?></div>
    </div>
  </div>

<?php endif; ?>

[Paul RModerator]

Hi,

Please change your code to this.

<?php

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

?>

<?php if ( x_get_option( 'x_topbar_display', 0 ) == 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="gtranslate" style="float:right;"><?php echo do_shortcode('[gtranslate]'); ?></div>
       <form style="float:right;" method="get" id="searchform" class="form-search" action="http://lpps1.minkacreativestudio.com.au/">
       <label for="s" class="visually-hidden">Search</label>
       <input type="text" id="s" class="search-query" name="s" placeholder="Search">
       </form>
    </div>
  </div>

<?php endif; ?>

Hope that helps

[Felicity EParticipant]

That’s fantastic. One last thing, how can I make it line up and have padding between it and the translate widget?

[Felicity EParticipant]

Actually, I worked it out and here’s what I added to the custom css:

.form-search {
 margin: 10px;
}
.form-search .search-query {
  height: 2.2em;
  border: 1px solid #ddd;
  font-size: 12px;
}

[NicoModerator]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Felicity EParticipant]

Can I ask one last thing? Given that I’ve now achieved all this with my topbar, how can I make it sticky as well?

[Paul RModerator]

Hi,

To make it sticky, you can add this under Custom > Edit Global CSS in the Customizer.

.x-topbar {
   position: fixed;
    width: 100%;
    top: 0;
}

.x-navbar {
   margin-top:58px;
}

.x-navbar.x-navbar-fixed-top {
   margin-top:0;
     top:58px;
}

Hope that helps.

[Author]

Posts