SuperSide Me 2.2.0 allows you to add a search button which controls a small search input, completely separate from your main menu panel. The search button and menu button can be displayed together in several different ways, with text or without.
One nifty option is to set both buttons with no visible text (don’t worry, they’re still properly labeled), with the buttons and site title/logo all in one line, like this image.
This is possible because when the search button is added to the site, SuperSide Me styles the container for the buttons with a little bit of flexbox, which is pretty magical.
This makes this effect surprisingly easy to accomplish with just a few settings and a tiny bit of CSS. Here’s how I’ve done it with the Genesis Sample theme. My plugin settings look like this:
The key items are:
- Main Menu Button Size: Auto
- Main Menu Button Text: empty
- Search Button: enabled
- Search Button Text: empty
- Menu Button(s) Position: Relative
- Menu Button(s) Location: .site-header .wrap
Then I’ve added this to the Genesis Sample style.css:
/* ## SuperSide Me
--------------------------------------------- */
.supersideme .ssme-buttons .title-area {
width: auto;
order: -2;
flex-grow: 1;
}
And that’s it. Depending on your theme, you may need to tweak either the settings or the CSS, but this works with an otherwise unmodified version of Genesis Sample. The button container setting should be the same as what’s holding your title area, which is .site-header .wrap for most Genesis child themes.