Minimum Pro Theme Add Search in Top Nav

[Eli Overbey]

Maybe I am going about this the wrong way (and some simple CSS styling could fix the problem) but I am have the hardest time adding a search bar to the minimum pro theme. (I've tried adding another widget area, adding a search function to my nav menu, etc)

Here is what I am trying to do. Picture Provided. (I'd love to give URL, but... localhost development).

So, I go into the widget area, and add my two widgets in 'Header Right':

When I add that, this happens:

As you can see, the search bar flows into the next line. I know the search bar will overflow onto that line at a smaller screen, but at a normal large screen, it is still there.

Any thoughts on how to squeeze the search bar beside the custom menu? I've tried reducing the menu width and floating it right, but no avail.

Here is the CSS I am working with:

/* Title Area
--------------------------------------------- */

.title-area {
	float: left;
	padding: 18px 0;
	padding: 1.8rem 0;
	width: 320px;
}

.header-image .title-area {
	padding: 0;
}

.site-title {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.site-title a,
.site-title a:hover {
	border: none;
	color: #333;
}

.site-description {
	font-size: 36px;
	font-size: 3.6rem;
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
	color: #fff;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
	width: 100%;
}

.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}

/* Custom header */

.header-image .title-area {
	padding: 0;
}

.header-image .site-title a {
	height: 60px;
	display: block;
	text-indent: -9999px;
	max-width: 320px;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 800px;
}

.site-header .search-form {
	float: right;
	margin-top: 10px;
	margin-top: 1rem;
}

*I've read multiple posts about how you can add a search bar to a Nav - but! This theme relies on you putting the menu bar in 'Header Right' (so I am using a custom menu and not the dedicated navigation bars).

http://local

[Sridhar Katakam]

Here you go: http://sridharkatakam.com/style-search-next-custom-menu-header-right-widget-area-minimum-pro/

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts