Centering Search Bar

Backlight Customization
#1

Hi there,

I have used the code below to center a search bar on my home page:

<style>
form.search-form, form.search-form p, form.search-handoff {
    margin-left: auto;
    margin-right: auto;
}
</style>

When I review the page though, the search bar is not centered below the horizontal menu (one column) as I am using two columns for content. You can see this at https://www.tasmanianphotos.com

Is there anyway I can center this search bar across the top of both content columns? Or directly under the menu before the content starts?

Cheers,
Chumby

#2

All sorted. Wrapped the search bar in the below and it worked fine:

<div style="width: 90%;">

Cheers,
Chumby

#3

that width setting will be different depending on the browser width (and monitor width). So that form will only be centered under certain conditions.
Change the browser width and you’ll see the search form move in relation to the menu.

#4

I don’t see a way of doing this. There’s no phplugins hook that will place content above the content area and below the navigation.
Maybe with jQuery? But that looks complicated, if it’s even possible.

#5

OK, gotcha Rod. Just because it looks ok on my browser doesn’t mean it will look ok on others ah?

Will keep looking around.

Appreciate the help.

Cheers,
Chumby

#6

yeah. If you make the browser narrower you’ll see what happens. And if you can stretch it wider (over two monitors perhaps) you’ll see it happening there too.

#7

Worked it out, Rod.

I changed it to a 3 Column/Split layout and then everything in the centre column can be centered and there are smaller columns now both on the left hand side and right hand side. Was able to delete that % in the top Div tag as a result.

Appreciate the help.

Cheers,
Chumby