Reply To: search button in the menu

[User]

This reply has been accepted as the best answer.

@Beethoven

First: Add Weaver Xtreme Search Box in Menu

To place the search box in the menu bar of the Weaver Xtreme theme, you must first ensure the Weaver Xtreme Plus plugin is installed, as the standard [search] shortcode is exclusive to it.

1. Navigate to Appearance > Weaver Xtreme Admin.
2. Go to Main Options > Menus.
3. Locate the Menu Right HTML area box.
4. Enter the shortcode [search] (or [search width=5 size=20] for customization) into this box.
5. Save your changes.

If you need the search bar to appear only on specific devices, you can wrap the shortcode with device-specific shortcodes like [show_if device="mobile"] [search] [/show_if]. Alternatively, if you wish to keep the default header search icon but move it into the menu area, you can use custom CSS rules such as #header-search .search-form {top:-50px;} to adjust its position, though using the shortcode in the menu HTML area is the standard method.

Second: Change Search Box Font

To change the font style of the search box added via the [search] shortcode, add a CSS rule in Appearance > Weaver Xtreme Admin > Main Options > Fonts & Custom > Custom CSS Rule box:

.search-form .search-field {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-style: normal;
}

Adjust the font-family, font-size, font-style, or font-weight values to match your desired look.

If you want to use a Google Font (or any custom font) that isn’t already loaded on your site, you’ll first need to load it via the Weaver Xtreme Plus Font Control:

1. Go to Main Options > Fonts & Custom (Custom tab).
2. In the Specify Font Source and Font Family box, paste the Google Fonts <link> tag and the font-family name.
3. Save — the font will then appear in the Font Family dropdowns throughout the theme.
   After that, reference that font name in the CSS rule above.