Docs

[intellibeam]

I’d like to place the following widget [Prisna GWT] on the topbar and have it be to the immediate left of the social icons. Meaning widget then Facebook, then Twitter etc.

How would I go about adding that?

[intellibeam]

This reply has been marked as private.

[Paul R]

Hi,

To do this, create file _topbar.php in wp-content/themes/x-child/framework/views/global
and copy the code below into that file

<?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; ?>
      <div class="prisna-gwt"><?php echo do_shortcode('[prisna-google-website-translator]'); ?></div>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Hope that helps.

[intellibeam]

.

[intellibeam]

I did it and it added the bar, just not in the right spot.

It added it above the social media icons. I would like it directly on the left side of the Facebook icon if possible. By having it above, it unfortunately increased the overall height of the topbar in the process as well. I will leave it that way so you will be able to see what I mean.

Thank you.

[Thai]

Hi There,
Thanks for writing in!
Try adding following CSS under Appearance > Customize > Custom > CSS:

.prisna-gwt {
  position: absolute;
  right: 150px;
  top: 8px;
}
@media (max-width: 767px){
.prisna-gwt {
  position: relative;
  right: auto;
  top: auto;
  display: block;
  margin: 5px auto;
  width: 150px;
}
}

Hope it helps.

[intellibeam]

Excellent, it worked!

Thank you so much for your continued support.

[Thai]

You’re always welcome.

[intellibeam]

Sorry to bump this thread but one of the updates to the X theme broke the widget location. Using the code provided above, it sticks it all the way to the left on my site now, not to the left of the social icons.

Is there a new code to try?

[Lely]

Hello There,

Upon checking, it is still on the left of the social icons on the right, but overlapped with facebook and twitter icon.
Please adjust the following :

.prisna-gwt {
    position: absolute;
    right: 150px;
    top: 8px;
}

Into this:

.prisna-gwt {
    position: absolute;
    right: 220px;
    top: 8px;
}

Hope this helps.

[intellibeam]

That does move the widget but the issue is, depending on various monitor resolutions, it screws it up. Like on mine, 3440×1440, it’s still all the way on the right. Now on someone elses normal size screen it might fit just fine. Is there any way to have it always be to the left of the social icons? Or at least auto center itself?

Thank you.

[Jade]

Hi there,

To do that, please change:

.prisna-gwt {
    position: absolute;
    right: 220px;
    top: 8px;
}

to

.prisna-gwt {
    position: absolute;
    left: 50%;
    top: 8px;
}

And change this:

@media (max-width: 767px){
.prisna-gwt {
  position: relative;
  right: auto;
  top: auto;
  display: block;
  margin: 5px auto;
  width: 150px;
}

to

@media (max-width: 767px)

    .prisna-gwt {
        display: block;
        margin: 5px auto;
        clear: both;
        width: 100%;
        float: left;
        text-align: center;
        position: relative;
        left: 0;
    }

    .prisna-gwt-align-right {
        text-align: center!important;
        margin-bottom: 20px;
    }

}

Hope this helps.

[intellibeam]

That fixed it but broke it on mobile devices. Anyway to separate them?

[Rue Nel]

Hello There,

The code we have in our previous doesn’t work because of a typographical error. Please use this code instead:

@media (max-width: 767px){
    .prisna-gwt {
        display: block;
        margin: 5px auto;
        clear: both;
        width: 100%;
        float: left;
        text-align: center;
        position: relative;
        left: 0;
    }

    .prisna-gwt-align-right {
        text-align: center!important;
        margin-bottom: 20px;
    }
}

Please see the screenshot:

Please let us know how it goes.

[Author]

Posts