Archived topic
Height Reduce for Search Widget in Side Bar
15 replies · Started by Sourabh on December 1, 2020
HI,
How to reduce the height of the search widget in the sidebar, at present it's looking like below -
https://www.dropbox.com/s/dfkb3y0a2xepuzv/Search%20Box%20in%20side%20Bar.png?dl=0
so I want to reduce the height from top and bottom and wants to remove the colour of search icon so that I can get below look -
https://www.dropbox.com/s/v9ani3o9n8c9nds/Search%20Box%20in%20side%20Bar%201.png?dl=0
Also, find reference URL below if you need help to see via inspecting elements etc.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Yes.. check
The link isn't working for me.
Can you double check?
Due to https its giving issue sometimes... I will change host this month...
Give a retry...
No luck - it just says This site can’t be reached.
Ohh.. it happens sometime...can't u understand by above giving urls..
?
I need to see the page in question so please sort that out first.
Thanks!
Hi,
Check the link is working now, I have updated SSL, Problem is resolved now...
Hi there,
try this CSS:
.is-right-sidebar .widget.widget_search {
padding: 20px;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.08);
box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.widget .search-form {
position: relative;
}
.is-right-sidebar .widget.widget_search label {
width: 100%;
}
.is-right-sidebar .widget.widget_search input[type="search"] {
padding: 5px 40px 5px 15px;
background-color: #fff;
}
.is-right-sidebar .widget .search-form button.search-submit {
padding: 5px;
background-color: transparent;
color: #000;
position: absolute;
right: 10px;
}
Hi David,
You did a great job, but seems something incorrect in css, I have attached a snapshot if you can rectify the problem of the area, Another this is that, when I try to search something using the same search box, we don't get a search result Instead it's redirecting to the posts page ???
https://www.dropbox.com/s/6jos81n669gng0j/area%20of%20problem.png?dl=0
its site reference for your testing purpose -
https://venusentertainments.com/89-proven-ways-to-make-money-with-your-blog-in-2020
I have correct the CSS here:
https://generatepress.com/forums/topic/height-reduce-for-search-widget-in-side-bar/#post-1565907
Looks like you have created archive pages with Elementor - the theme has no control over there conditional displays, you would need to ask Elementor support regarding that issue.
Yes, you are true, I have created an archive template in elementor ?
So you mean it's happening because of the archive template ??
If I remove it then how should I display posts etc, does GP having such a facility?
So you mean it’s happening because of the archive template ??
Yes that's what David is saying.
If I remove it then how should I display posts etc, does GP having such a facility?
Yes - GP displays posts on the posts page (this is a WordPress functionality) and you can use the customizer options here to modify the layout:
https://docs.generatepress.com/article/blog-content-layout/
It's resolved now, Thanks David for your CSS help.