[Resolved] Contain search field in primary navigation menu to right and limit its width

[Joe]

Hi,

I am using the search in the primary navigation menu. The search icon is on the right end of the menu and when I click on it, the search field is at the height of the navigation menu, which is good. But the search field extends all the way across the navigation menu, which looks odd in certain situations.

After the search icon is clicked, I would like the search field to be restricted to the right side of the navigation menu and limit the width of the search field to maybe an inch or two.

I am using Simple CSS, so if you can give me some css to drop in, I would appreciate it. If you can let know the numerals in the CSS that you send that control the width of the search field, that would be great.

Thanks, Joe

[David]

Hi Joe,

you can try this CSS:

.navigation-search.nav-search-active {
    max-width: 250px;
    margin-left: auto;
    margin-right: 60px;
}

you may need to tweak the max-width and margin-right px.

[Joe]

Very nice. Thanks.

BTW, GP has the best support in all of my web related work.

Thanks again, Joe

[David]

Glad I could help Joe, and thank you for the great feedback!

[Author]

Posts