[Resolved] Use the 2nd Navigation Bar as Search function

[Craig Nicholson]

Hi

I have created a search page on my website

http://luxor-lettings.com/passing-var/

however i wondered if there was a way to use a 2nd navigation bar to contain three or four of the search components on the top header at all times?

i.e. please take a look at this image which is a mock up i pulled together of what i envisaged it looking like:

so i want to have a 2nd bar underneath my current nav bar but it doesnt contain navigations it is more the “search” features

can anyone help?

thanks

[Tom]

Hmm, well you would need to be using some sort of property plugin/custom post type which had a built in search function that searched the post type. Not something I can really help with in here, but there’s definitely some property plugins out there that would have this kind of functionality.

[Craig Nicholson]

Hi Tom

i have managed to get a search function in the header but i need to align the table to the left.

any suggestions?

http://luxor-lettings.com/

i have created a Text widget using this html in the header

<form action=”catching-var” method=”post”>
<table style=”width: 100%;”>
<tbody>

<tr>
<td>Postcode</td>
<td><select name=”postcode”>
<option value=”L”>No Postcode</option>
<option value=”L4″>L4</option>
<option value=”L6″>L6</option>
<option value=”L7″>L7</option>
<option value=”L14″>L14</option>
<option value=”L15″>L15</option>
<option value=”L17″>L17</option>
<option value=”L20″>L20</option>
<option value=”L35″>L35</option>
</select></td>
<td>Max. Bedrooms</td>
<td><select name=”roommax”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select></td>
<td>Max. Price PCM (£)</td>
<td><select name=”pricemax”>
<option value=”9999″>No Max</option>
<option value=”100″>100 PCM</option>
<option value=”150″>150 PCM</option>
<option value=”200″>200 PCM</option>
<option value=”250″>250 PCM</option>
<option value=”300″>300 PCM</option>
<option value=”350″>350 PCM</option>
<option value=”400″>400 PCM</option>
<option value=”450″>450 PCM</option>
<option value=”500″>500 PCM</option>
<option value=”600″>600 PCM</option>
<option value=”700″>700 PCM</option>
<option value=”800″>800 PCM</option>
<option value=”900″>900 PCM</option>
<option value=”1000″>1,000 PCM</option>
</select></td>
<td><button name=”subject” type=”submit” value=”submit”>Find Properties</button></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Advanced Search</td>
</tr>
</tbody>
</table>
</form> 

[Tom]

Try this CSS:

.header-widget {
      float: none;
      max-width: 100%;
}

[Craig Nicholson]

thank you so much Tom it has worked a treat!!!!

thank you thank you thank you!!!!

http://luxor-lettings.com/

please take a look, only question, do you think there is a way i can make the header widget thinner?

i.e. the distance between the “Advanced Search” and the bottom of the grey area (like there is an additional row)

[Tom]

Try this CSS:

.header-widget table {
      margin-bottom: 0;
}

[craig nicholson]

Thanks Tom that is amazing!!

It’s taking shape now the website please have a look at what you have helped me achieved

[Tom]

Looks really good! Lots of customization. Great job 🙂

[Author]

Posts