Search Bar Issues in Newspaper 7 Theme

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: search bar

Author

Posts
September 14, 2016 at 4:53 am #265878

Greg Brown
Expired Member

Post count: 28

I am trying to center the search form in the search bar. No matter what CSS I apply, nothing will center it. I suspect that it is because it is using relative positioning. Is there an easy way to center the search form and also make the inputs stretch to the full width? Here is a link to my site so you can see what I am talking about.

http://v4.onceuponatime.events/vendor-directory/

Also, how can I remove the spacing between the map and the search bar? I have set both padding and margins to 0, but I still have a gap. I guess I could use negative margins, but sometimes that doesn’t work well on mobile devices.

Thanks

September 14, 2016 at 7:35 am #265903
Kor
Moderator

Post count: 16516
Hi Greg,

Try using the custom CSS below and see if it’s what you’re looking for. Insert into GD > Design > Scripts > Custom Style CSS
```
/* Center Search */
.geodir-search {
    float: none;
    margin: 0 auto;
    position: relative;
    width: 500px;
}

/* Removes Top and Bottom White Space */
.top_banner_section {
    margin-bottom: 0px;
}

.geodir-loc-bar {
    margin: 0px;
}
```
September 15, 2016 at 3:34 am #266701

Greg Brown
Expired Member

Post count: 28

That is almost what I want. That takes care of centering and removing the white space, but I would like for the form inputs and button to take up the entire width. What I am unsure of is how can I do this and make it still mobile friendly, when I try setting % widths on the form inputs, it doesn’t work.

Thanks Kor

September 15, 2016 at 2:36 pm #266827
Kor
Moderator

Post count: 16516
Hi Greg,

You can try using the custom CSS code below to adjust the sizing to your needs. I hope this helps and please let us know how it goes.
```
/* Search Input Text Box */
.geodir-search input[type="text"] {
    width:300px;
}
/* Search Container */
.geodir-search {
    width:900px;
}
/* Search Button */
input.geodir_submit_search {
    width:200px;
}
```
September 16, 2016 at 3:15 am #267036

Greg Brown
Expired Member

Post count: 28

Thank you Kor. With a little tweaking, that worked. Thanks again!

September 16, 2016 at 5:03 am #267079

Kor
Moderator

Post count: 16516

Hi Greg,

Glad that worked. Let us know if you need anything else.

Thanks!
Author

Posts