extend search widget in length

Hi,

Try this CSS,

@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) {
#topbar-search input[type="text"] { width: 550px; }
}

But I recommend to create a child theme and adjust the topbar template, because it is designed with grid, so adjusting the column length can be give more space on the right side, for now it is 6 column + 6 column, you can change that to something like 8 Column + 4 Column.

Regards,

Thanks laranz.

the length is extended exactly as I needed, I also need to change the icon (search lense) to the right side and in a kind of box as usually search bar is.
can you please advise.

Thanks much.

Try adding this CSS and let me know if this works for you:

@media (min-width: 992px) {
.form-search .search-icon {
    float: right;
    position: relative;
    margin-top: -33px;
}

.form-search {
    max-width: 550px;
}

.kad-topbar-right {
    width: 70%;
}

.kad-topbar-left {
    width: 30%;
  }
}

Be sure that you’re placing all custom CSS into Theme Options> Advanced Settings.

-Kevin

Thanks Kevin

it worked but search box now shifted little towards left hence it really close to other widget and leaving the space towards right, is it possible to align search box in middle ?

also I want to change the back ground to white and text to black.

Thanks Much.

Hi,

You can use this Custom CSS for color changes,

#topbar-search .form-search *::-moz-placeholder { color: #000; }
.form-search .icon-search { color: #000; }
#topbar-search input[type="text"] { background-color: #ff0000; }

Regards,

Thanks

background color is changing but text color is white no matter what the color code is.
I tried #000 as you suggested and #000000 too but text color is still white.
can you take a look and advise please.

Thank you.

In order to maintain a good look on all browser sizes, I suggest removing my previous CSS and using this instead:

@media (min-width: 767px) {
.form-search  {
    width: 60%
}

.kad-topbar-left {
    width: 30%;
}

.kad-topbar-right {
    width: 70%;
  }
}

.kad-topbar-right {
    width: 70%;
}

In my opinion, this is a much cleaner look and it works for all browser sizes. If you resize in chrome inspect tool as the site is now, you’ll notice some responsive issues. This CSS will resolve them, as well as center the search on all screen sizes.

Try it out and let me know if you like the look.

-Kevin

Thanks Kevin.

I quite like the look, it looks perfect now.

Thanks again Kevin and laranz for all your support, this thread stand closed.

You’re welcome ??

Regards,

Hi

I got a new question, posting here if you can help here else I will open a new thread.

I have enabled flip image in theme option> shop setting> product flip image > ON
but on /shop/ page image are not getting flipped, I have checked on chrome, Mozilla and IE.

Please advise. Thanks

In the future, since you’re using the premium version of the theme, please post in the premium forums.

Do you have a cache running on your site? It’s possible that you may need to clear it before the changes become visible.

-Kevin

sure Kevin.

But I am not using any cache as of now. is there some thing else that can cause issue ?

Thanks

I believe that the issue is that you only have one image set for the product. Image flip is designed to flip to the second image in your product gallery.

-Kevin

Nevermind that’s incorrect. I’m still looking into this issue.

-Kevin

@bsatsangi use the premium forums. Thanks!

Your issue is possible that you have turned the theme image ratio off in your theme options > shop settings.

Ben