CSS styling for search menu added to nav menu

The form already has an id of searchform so that would be why adding another id of the same value would be a problem, you can’t have two ids with the same value. You could just add a class to the <li> element. It can be whatever you want, as long as it is descriptive and unique. So am1988_searchform would be a good one.

Nice workaround btw to get that search form. But if I were you I would run your if statement before all of that, otherwise you are running that code for no reason if it isn’t the primary menu position.

I got this search/nav menu code online. Actually have another site I use this on with two menus so an if statement would have made that better. Thanks.

I don’t follow the searchform duplication. I tried using the ID searchform in my styles.css file.

As far as I can tell, there is no styling for the searchform as a whole, per se. I think the class ID of search forms is s, but can’t find any reference to it in my styles.css below. It looks like text,input and button also affect the elements within the search form but not the entire form area as one.

[Entire stylesheet deleted – that’s WAAY too much code to paste here and it’s all visible on your site anyway. See the forum rules and use a pastebin if you want to post that much code]

I also did not see a duplicated search form

First, change the
<li> to a unique container, let’s use:

<div class="my_form">

so above becomes:

// add search to menu bar
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

	if( $args->theme_location == 'primary' )
        return $items .= '<div class="my_form">' . $searchform . '</div>';

    return $items;
}

Now we need the CSS:

.my_form {
display: inline-block;
position: relative;
padding-left: 277px;
}

Now we have a problem when the browser window is resized to less than 955px (or so)

Also when we get down to mobile views, but that is a start…

ala the duplicated searchform, it is already rendered in the search form code. Take a look at the form declaration, it already has searchform id, so adding an id of searchform to anything else would not be correct.

And I’d modify Seacoast’s code and move the if statement up to prevent the wasted execution.

// add search to menu bar
add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        if( $args->theme_location == 'primary' ) {
                ob_start();
                get_search_form();
                $searchform = ob_get_contents();
                ob_end_clean();

                $items .= '<div class="my_form">' . $searchform . '</div>';
        }
    return $items;
}

Timothy,

I see what you are saying about the $searchform.
I will give your if statement modification a shot.

Seacoast,
I will give that a try. I was thinking that instead of padding of 277 to try a float: right.
Keeping the theme responsive is what has been frustrating me.

Thanks

Both changes worked well.

I gave the search form an id of menu_search. The css code I used is this:

/* nav menu search form */
.menu_search{
	display: inline-block;
	position: relative;
	float: right;
	padding: 5px;
}

But I seem to have lost all the search menu button styling.
See here: website

I am wondering if I should add the menu_search class to the code below from my styles.css file.
Or duplicate the code under menu-toggle, menu-toggle:a, menu-toggle:hover, etc to the menu_search section I added.

/* Form fields, general styles first */
button,
input,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px;
	padding: 0.428571429rem;
}
button,
input {
    line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
li.bypostauthor cite span {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.menu-toggle,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	cursor: pointer;
}
button[disabled],
input[disabled] {
    cursor: default;
}
.menu-toggle:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
article.post-password-required input[type=submit]:hover {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
.menu-toggle:active,
.menu-toggle.toggled-on,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border: none;
}

Keeping the theme responsive is what has been frustrating me

The default theme is responsive. Your added code is not.

Why is my added code not responsive?