Title: Responsive plug-in Last modified: August 31, 2016 --- # Responsive plug-in * [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/) * Hi * I hope this is a simple question and I will try and keep it simple. * I am running a responsive theme. * I have added a plug-in to this theme, which includes a search bar. * This search bar etc does not act responsively. The left position of the bar stays where it is and then disappears out of view when the browser becomes small enough. The plug-in developers say the plug-in acts responsively with their themes but not my theme. * I really only want the bar/button to stay exactly as they are and expand and contract with the browser window. * Is there any simple (or otherwise) CSS code to make this search bar move like I want responsively? * Mike Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/responsive-plug-in/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-plug-in/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987091) * There won’t be a plugin, so I recommend linking your website so that we can give CSS help. * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987100) * You mean that no plug-in will be responsive? * The website is here [http://www.pinkpiranhaproperty.com](http://www.pinkpiranhaproperty.com) * But the custom CSS I have added is limited as you will see. * Mike * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987103) * I meant that there aren’t going to be plugins to resolve this problem in the way that you might want it. Some plugins throw away your theme on mobile and use their own responsive design, but that’s probably not what you want. * So I noticed that your sidebar is really at the top of the page, and it has been moved in its current position using absolute positioning. It’s going to be very tricky to work like that in a responsive design. It would be much better if the sidebar could be moved in the HTML so that it is beside the content. * I would expect it to be beside this element: * ```
``` * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987120) * I have not moved the sidebar. The top pink band with the phone number/email etc is the secondary menu of my theme. * I have only moved the main navigation menu a little bit (with the Landlords, Renting bits). * Here’s what I am really struggling with. Why does the search bar code below work responsively but if I cut and paste it to my site, it does not act work responsively?? * [http://codepen.io/capynet/pen/vJBnL](http://codepen.io/capynet/pen/vJBnL) * Mike * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987123) * Is this what we’re looking at: [http://snag.gy/mq3Gl.jpg](http://snag.gy/mq3Gl.jpg) * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987128) * yes that is the search bar … * As you can see, it does not act responsively at all … * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987131) * How did this appear on the page, is it part of your theme or a plugin? * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987133) * this is a search bar that is part of my plug-in (wp-property) … I have added the search form custom to the header via a shortcode from my child theme functions. php file.. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987135) * I’ve triple checked and I still think it’s an issue to do with the absolute positioning applied to this searchbar. Maybe it would be better to consult with your theme’s vendors if you’re sure that you that you didn’t change the position of this. This would suggest it’s a bug in the theme. * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987139) * I’m a little confused .. I did change the position of this – I applied the absolute positioning of this I said (code below). Should I change the absolute position to something else? * functions.php file of child theme: * // Apply Custom Search bar in header // add_action( ‘avada_header’, ‘my_custom_search’); function my_custom_search() { echo do_shortcode(‘[property_search]’); } * custom.css: * /* Search functionality – Main search bar elements */ .wpp_shortcode_search {/* Positioning */ position: absolute; width: 40%; bottom: -10px; left: 436px; } * I’m still a bit confused as to my previous question: * ” Here’s what I am really struggling with. Why does the search bar code below work responsively but if I cut and paste it to my site, it does not act work responsively?? * [http://codepen.io/capynet/pen/vJBnL](http://codepen.io/capynet/pen/vJBnL) “ * Mike * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987141) * If you apply the absolute positioning to the Codepen example then it doesn’t become responsive. That’s why your Codepen example works, it is out of context. * I’ve applied the absolute positioning to the Codepen example here to demonstrate the issue: [http://codepen.io/anon/pen/vLRgGj](http://codepen.io/anon/pen/vLRgGj) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987142) * So I would recommend not using absolute positioning in this case, as it will cause a lot of unnecessary headache. What would be much better would be to move the searchbar in the HTML so that it sits next to the main content. * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987145) * I see what you mean … * That’s absolutely fine, I will remove the absolute positioning no problem.. * I’m not sure I understand why moving it to HTML is a better idea but I will take your word for it – but it then might get a bit more complex for me .. I guess I do that in the functions.php file aswell? … * I wonder if you could advise on what code is required? * Mike * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987146) * Moving the HTML will allow you to use more friendlier CSS for a responsive design. * For example, if you move the searchbar underneath the HTML for the main menu then it sit naturally in the page and you won’t have to force it into position: * ```
[...]
[...]
``` * Unfortunately we can’t help beyond CSS recommendations because this is a commercial theme. * Thread Starter [Mike](https://wordpress.org/support/users/mikefarrell/) * (@mikefarrell) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/#post-6987148) * ok .. so if I embed the plug-in search bar inside the HTML for the header main navigation it will naturally/automatically be responsive like the rest of the header/theme?? .. (or is there more required and that is wishful thinking?) * I understand the support limitations but are saying this is straightforward enough for a non-expert like me? Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/responsive-plug-in/page/2/?output_format=md) [→](https://wordpress.org/support/topic/responsive-plug-in/page/2/?output_format=md) The topic ‘Responsive plug-in’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [search bar](https://wordpress.org/support/topic-tag/search-bar/) * 16 replies * 2 participants * Last reply from: [Mike](https://wordpress.org/support/users/mikefarrell/) * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-plug-in/page/2/#post-6987200) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics