Add second widget in header

Hi Rikard,

Here’s something code snippet I tried that is similar to what I’m trying do do:

I created the following CSS to position the WC Predictive Search search bar/icon:
.wc_ps_sidebar_container {
width: calc(100% – 0px – 0px – 2px)!important;
}
I’m left with some positioning and width issue on wider screens and small iphone portrait screens.

Any suggestions on how to get the width of this container to displays wider on large screen and to a reasonable width on small screens?

THanks
Lyse

Hi Ismael,

I’ve added margins as follows:
@media only screen and (max-width: 767px) {
.wc_ps_sidebar_container {
margin: 5px 10px 0px 0px;

}
.wc_ps_sidebar_container {
width: calc(150% – 0px – 0px – 2px)!important;
}
But how do I increase the size of the search widget container on larger screens. I tried adding the width: width: calc(150% – 0px – 0px – 2px)!important; to the smaller devices screen size and increase the width of the container by changing calc(200% – 0px – 0px – 2px)!important; to 200%. That does not work because it gets applied to the smaller screen as well. So how can I have the search widget container wider on wide screens and smaller on small screens?

Thanks
Lyse

Hi Ismael,

1) Screenshot of what the search bar looks like on my iphone using .wc_ps_sidebar_container {width: calc(150% – 0px – 0px – 2px)!important;}
https://www.dropbox.com/s/17ux6h7bft564pc/search%20bar%20on%20iphone%20100.jpg?dl=0

2) Screenshot of what this CSS code looks like on my large monitor:
https://www.dropbox.com/s/gcqtmne3e9ehyw4/search%20bar%20too%20small%20large%20screen.png?dl=0

3) Screenshot of changing the CSS to .wc_ps_sidebar_container {width: calc(280% – 0px – 0px – 2px)!important;}
https://www.dropbox.com/s/gcqtmne3e9ehyw4/search%20bar%20too%20small%20large%20screen.png?dl=0

Screenshot (3) is what I want to see on the larger screens
Screenshot (1) I want to keep when on smaller screen sizes

Hope this clarifies what I’m trying to accomplish.

Lyse

Hi Ismael,

I got it to work after making the following changes:
@media only screen and (max-width: 767px) {
.wc_ps_sidebar_container {
width: 320px!important;
margin: 2px 2px 2px 5px!important;
}
}
@media only screen and (min-width: 989px) {
.wc_ps_sidebar_container {
width: 350px!important;
margin: 10px 10px 10px 285px!important;
}
}

Thank you so much, you’ve been extremely helpful and patient.
Lyse

Hi Mike,

You’ll also see that my search bar in the widget area now displays incorrectly. I will be removing all of search bar widgets I’ve created but until this issue is fixed I can remove the search function. So would need temporary fix.

Lyse

Hi Mike,
I changed the code like this instead because the previous suggestion had the search bar in the header not displaying correctly:
/*position container as part of secondary menu */

@media only screen and (min-width: 989px) {
.wc_ps_sidebar_container {
width: 350px!important;
margin: 10px 10px 10px 285px!important;
}
}
@media only screen and (min-width: 989px) {
.avia-builder-widget-area .wc_ps_sidebar_container {
width: 100%!important;
margin: 10px 10px 10px 0px!important;
}
}

I still can’t see what’s happening on my live site….

Thanks
Lyse

Hi Mike,

I fixed the CSS code to fix the sidebar widget:

/*position search container below secondary menu */
@media only screen and (max-width: 767px) {
	.wc_ps_sidebar_container {
          width: 320px!important;
	  margin: 5px 2px 2px 5px!important;
	}
	.phone-info.with_nav span {
		margin-top: 15px !important;
		margin-bottom:5px!important;
	}
}
@media only screen and (min-width: 989px) {
    .wc_ps_sidebar_container {
       width: 350px!important;
       margin: 10px 10px 10px 285px!important;
    }
}

It works perfectly on the staging and live website on large screen.
On the smaller screen, it works well on the staging site where the phone # gets moved below the search bar, but on the live site, the search bar covers the phone #.

Same CSS code is use for both sites.

Any ideas why?
Thanks
Lyse
@media only screen and (min-width: 989px) {
.avia-builder-widget-area .wc_ps_sidebar_container {
width: 100%!important;
margin: 10px 10px 10px 0px!important;
}
}

So now

Hi Mike
On the live site I copied the small device CSS in the theme quick style area and it worked. Don’t really understand why but as long as it worked I was Ok with it. My client kept asking to get it fixed

Thanks