Docs

[applegatetech]

I am trying to center an image between the menu on the left and the search bar on the right. The image is in the upper left hand corner now. I have a child theme and _topbar.php already.
Thanks!
http://strictlyseeds.com

[applegatetech]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-topbar-inner > img {
  clear: both;
  display: block;
  margin: 0 auto;
}

Hope this helps.

[applegatetech]

Great! The image is centered nicely. Now I would like to line up the other items in a row with the image to make the topbar not so tall (too much white space).
Thanks

[Nabeel A]

Hi again,

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

.top-menu {
    float: left !important;
    width: 38%;
}
.x-topbar-inner > img {
    width: 27%;
    min-width: 200px;
    max-width: 200px;
    float: left !important;
    clear: none !important;
}
.my-custom-shortcode {
    float: right;
    width: 35%;
}

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

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[applegatetech]

Awesome! Thank you, that worked. How do I keep the submit button from wrapping below the search bar?

[applegatetech]

Also, how do I increase the image size? I tried to make it bigger by uploading a bigger picture, but I don’t see a difference.

[Rue Nel]

Hello There,

Thanks for updating in!

To keep the submit button from wrapping below the search bar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.product-search-form .product-search-field {
    float: left;
    max-width: 270px;
}

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

To increase the image size, please have the custom css code updated and increase the width and maximum width because at the moment, it is set to only have 200 pixels wide:

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

Hope this helps.

[applegatetech]

Yes, that works. Thanks a lot!

[Paul R]

You’re welcome! 🙂

[applegatetech]

How do I make the image in the topbar a link?

[Jade]

Hi there,

Please wrap the img element that you have added in an a element like:
<a href="THE_LINK" target="_blank"><img src="http://strictlyseeds.com/wp-content/uploads/2016/12/StrictlyLogo.png"></a>

Hope this helps.

[applegatetech]

I tried the above code and it did indeed make it a link, but now the image is too large and it shifted the menu and search bar.

.top-menu {
    margin-top: 35px;
    float: left !important;
    width: 38%;
}
.top-menu ul {
     margin:0;
}
.top-menu li {
      display:inline-block;
}
.top-menu li a {
    padding:0 10px 0 0;
    line-height:30px;
}
.x-topbar-inner > 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 > img {
    float: none !important;
}
.my-custom-shortcode {
    float: none !important;
    width: 100% !important;
}
.my-custom-shortcode .product-search {
    width: 100% !important;
    float: none !important;
}
}

Thanks

[applegatetech]

I am using the above code in Custom CSS.

[Rue Nel]

Hello There,

Thanks for updating in! Now that the image is made a link, you will need to update the custom css block. Please remove this code:

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

And replace it with this code instead:

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

We would loved to know if this has work for you. Thank you.

[Author]

Posts