Modify location/appearance of Search

patvandenbosche

There was a tiny magnifying glass on the original design, but I removed it after modifying the main menu. I added a search feature in the header-l module position, but it is very clunky looking. Could the magnifying glass be added on the same line as the main menu, but at the far right? If not, how would I get that same styling for a search feature in header-l?

I've marked up a screenshot for clarification:

saguaros

Hi Pat,

I edited the layout of template on your site a little bit by adding a new column for the search position on the right of the main navigation:

And create a search module + assign to this 'search' position so it can look our demo site.

However, there are more menu items in the main navigation on your site, if you keep the 'container' of this mainnav block to 'Fix', there is not enough space to show all items on 1 line so I also change the 'container' to 'Fluid' as above screenshot.

You can adjust settings as you wish.

patvandenbosche

Thank you! That's exactly what I wanted, but never knew how. Just to confirm, all the changes you made will be there on the next template update?

patvandenbosche

I have a problem with what was done. The menu is now far left. I would like to see it more centered, toward the right, not at the left edge. I tried adding a position for size 2, but I just really messed things up. I'm attaching screenshot:

saguaros

patvandenbosche

You can try this custom css:

@media (min-width: 992px) {
.t4-mainnav .t4-col.mainnav {
    padding-left: 400px !important;
}
}

and change to your desired value.

patvandenbosche

Perfect!