Jump to content

How to SHORTEN the length of the top search box to allow for bigger logo


Recommended Posts

The search box is about a half inch too long. I could make my logo smaller but then it does not look exactly correct. How can I shorten the length of the search box by a bit so that I can keep my logo the right size? See the screen clip attached which shows the top of my website and the search box that I want to chop.



Link to comment
Share on other sites

You can do that by editing the blocksearch.css file. If your PrestaShop root directory on your hosting account is public_html, then the path to the file will be public_html/modules/blocksearch/blocksearch.css. Find the code:


#search_block_top #search_query_top {
padding:0 5px;
width:300px;/* 310 */
border:1px solid #666;
border-right: 0 !important;
background:url(img/bg_search_input.png) repeat-x 0 0 #fff;
float: left;


and edit width: 300px; changing the number to whatever you want. However, this will shorten the search bar on the right side. Its position will be the same with respect to the left border of the field. To move the search bar to the left you need to edit the following code in blocksearch.css:


#search_block_top {


edit the line left: 0; to something like left: 100px; for example.


Then clear your browser cache and refresh the frontend.


Hope this helps.

Edited by hxd (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...