Docs

[applegatetech]

Not quite. The image size is too large and the search bar have shifted down.
I updated the code in one other place on Global CSS and Global Javascript.

.x-topbar-inner > a img {
    width: 27%;
    min-width: 250px;
    max-width: 250px;
    float: left !important;
    clear: none !important;
}
.my-custom-shortcode {
    float: right;
    width: 35%;
}
.product-search-form .product-search-field {
    float: left;
    max-width: 270px;
}

.product-search-form [type="submit"] {
    float: right;
}

@media screen and (max-width: 959px) {
.top-menu {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
}
.x-topbar-inner > a img {
    float: none !important;
}
.my-custom-shortcode {
    float: none !important;
    width: 100% !important;
}
.my-custom-shortcode .product-search {
    width: 100% !important;
    float: none !important;
}

(function($) {
   $('.x-topbar-inner > a img').insertAfter('.top-menu');
})(jQuery);

Thank for the help.

[Joao]

Hi There,

You can add the following code to Appereance > Customizer > Custom > CSS

.x-topbar img {
  width: 200px !important;
}

Hope it helps

Joao

[applegatetech]

That makes the image not a link anymore.

[Jade]

Hi there,

Please add a class to the <a> tag that wraps the image then update this CSS:

.x-topbar-inner > a img {
    width: 27%;
    min-width: 250px;
    max-width: 250px;
    float: left !important;
    clear: none !important;
}

to

.x-topbar-inner a.the_class img {
    width: 27%;
    min-width: 250px;
    max-width: 250px;
    float: left !important;
    clear: none !important;
}

Hope this helps.

[applegatetech]

It works great now. I did this for my _topbar.php file

?>

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

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
    <a class="topbarlogo" href="http://strictlyseeds.com" target="_blank"><img src="http://strictlyseeds.com/wp-content/uploads/2016/12/StrictlyLogo.png"></a>
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php

        wp_nav_menu( array(
            'menu'           => 'topbar-menu',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?php x_social_global(); ?>
      <div class="my-custom-shortcode"><?php echo do_shortcode('[woocommerce_product_search submit_button="yes"]'); ?></div>
    </div>
  </div>

<?php endif; ?>

Under customize I added
Global CSS

.x-topbar-inner > a.topbarlogo img {
    width: 27%;
    min-width: 250px;
    max-width: 250px;
    float: left !important;
    clear: none !important;
}

and

@media screen and (max-width: 959px) {
.top-menu {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
}
.x-topbar-inner > a.topbarlogo img {
    float: none !important;
}
.my-custom-shortcode {
    float: none !important;
    width: 100% !important;
}
.my-custom-shortcode .product-search {
    width: 100% !important;
    float: none !important;
}

Global Javascript

(function($) {
   $('.x-topbar-inner > a.topbarlogo').insertAfter('.top-menu');
})(jQuery);

How do I force the link to open in the same window?
Thanks.

[Friech]

On the _topbar.php file, remove the target="_blank" from the line:

<a class="topbarlogo" href="http://strictlyseeds.com" target="_blank"><img src="http://strictlyseeds.com/wp-content/uploads/2016/12/StrictlyLogo.png"></a>

Hope it helps, Cheers!

[applegatetech]

Amazing support! Thanks.

[Christopher]

You’re welcome.

[Author]

Posts