Brian Gardner's Custom Theme Edits on Minimalist-Pro Template

[Vasilis]

Dear awesome people

I recently installed Minimalist-Pro on my website (after using Genesis Simple a couple of years) and having a couple of questions.

1. Trying to customize a menu search bar following Brian Gardner's website search bar appearance

Followed the StudioPress guide to add the search bar on my navigation bar like this:

//* Add Navigation Menu Extras
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
function theme_menu_extras( $menu, $args ) {

	if ( 'primary' !== $args->theme_location )
		return $menu;
		ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '<li class="right search">' . $search . '</li>';
        return $menu;
}

And after copied Brian Gardner's custom CSS from the "Search Form" area .CSS file - using this:

/* Search Form
---------------------------------------------------------------------------------------------------- */

.site-header .search {
	float: right;
}

.search-form:before {
	color: #000;
	content: "\f4a5";
	font-family: 'Cormorant Garamond', serif;
	font-size: 16px;
	right: 15px;
	position: absolute;
	top: 7px;
}

.entry-content .search-form {
	margin-bottom: 40px;
	width: 50%;
}

.site-header .search-form {
	margin-top: 4px;
}

.site-header .search-form input[type="search"] {
	background-color: transparent;
	border: none;
	border-radius: 0;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
	padding: 5px 0 5px 10px;
	padding-right: 35px;
	text-transform: uppercase;
	transition: width .15s ease-in-out;
	width: 100px;
}

.site-header .search-form input:focus[type="search"] {
	background-color: #f5f5f5;
	transition: width .15s ease-in-out;
	width: 200px;
}

.widget_search input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

Is there something I'm doing wrong and it won't appear like it is supposed to?

Your response and time is much appreciated

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

http://thevasilis.com

[Victor Font]

First, turn off the CSS minification while you are developing. CSS changes are often not picked up.

Second, the content area is probably too narrow for a search to fit on the menu line. Widen the wrap.

Until you turn of the minification, there's not much else that can be done to help you.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Vasilis]

Victor thank you very much

Now minify is disabled , CloudFlare minify is disabled also and cache purged from CloudFlare.

Any suggestions?

Appreciate it

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

Bumping this post up.

Any suggestions?

Thanks

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Victor Font]

Minimalist Pro removes the output of nav extras. Open functions.php and comment out the following code starting at line 109:

// Remove output of primary navigation right extras.
remove_filter( 'genesis_nav_items', 'genesis_nav_right', 10, 2 );
remove_filter( 'wp_nav_menu_items', 'genesis_nav_right', 10, 2 );

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Vasilis]

Thanks Victor!

Did this already as you suggested.

Now how can we put the search form in the nav bar AND remove the search button?

Also customize it with the CSS in the example?

Appreciate it.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Victor Font]

I can see you added it. As I said in my original reply, your content area isn't wide enough for the search form to display on the same line as the menu. You have successfully added it to the menu, but think of it as trying to squeeze an object into a space that is too tight. Something has to give. In this case, the search is forced to display on the next line because there's no room for it. You have to change the width of .site-container to give yourself more room. It's going to change the appearance of the site, so you have to choose whether it's important enough for the search to be on the menu, or place it someplace else to keep the narrow design.

Also, you cannot remove the search button. Search is a form and the button is the submit. You have to have a way of triggering the submit. You can alter the appearance of the button in CSS, but that's all.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Vasilis]

Thank you very much Victor

I understand the can't fit part because it is too tight.

How does it work here? => http://briangardner.com

Is it possible to use it exactly as Brian Gardner is using it on his theme?

1) Would require the menu items to float left and the search bar to float right.

2) Would require the search bar to expand on click and the search button to be inside , ALSO the search bar would need to have smaller width in characters.

What do you think about this?

Can it be done or should I forget it?

Thank you very much

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Victor Font]

Brian is not using the same theme as you are. He's using a custom theme he designed for his own personal website. It's called BG Boxshadow. His menu is in a different location than the theme you are using.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Vasilis]

Victor thank you very much , however I'm asking a different question.

Given the fact that I can't seem to be able to find BG Boxshadow template I'm trying to recreate some parts of it.

If it can be done I would like to know how , if not - no problem.

Cheers.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Victor Font]

You can design any theme any way you want. The best way to learn how other people do things is by examining their code with your browser inspect tool. https://victorfont.com/how-to-use-your-browsers-inspect-tool/

Using your browser's tool, you can see how the html is laid out and you can see the exact CSS in use.

What Brian has done on his site is to expand the .site-header to full width. The menu width is 600px and the search is not part of the menu at all. It is in it's own div positioned to the right of the menu. I could spend the next two hours writing all of the code for you, but what fun would that be for you. I would also lose 2 hours of billable time. I'm certain you can figure this out.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts