Style Search Form in Menu Bar

  • Resolved creativevegans

    (@creativevegans)


    10 years, 5 months ago

    Hi,
    I managed to get a search bar in my main menu, but no matter how much I try, I cannot get it to be positioned at the right end of the menu. I tried float: right, position: absolute, position: relative, display: inline, display: block, display: inline-block, and combinations of those, but I cannot get it to work. It worked with margin-right: 100 px, but I do not want to use that as I want my theme to be responsive.

    Any help would be appreciated. Thank you!
    Maria
    creativevegancooking.com

Viewing 2 replies - 1 through 2 (of 2 total)

  • Put the code for search form out side of

      tag. So that it will appear something like that:

      <div class="menu-custom-menu-container"><ul id="menu-custom-menu" class="nav-menu"><li id="menu-item-63" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-63"><a href="https://creativevegancooking.com/">Home</a></li>
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="https://creativevegancooking.com/recipes/">Recipes</a></li>
<li id="menu-item-64" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-64"><a href="https://creativevegancooking.com/about-cvc/">About</a>
<ul class="sub-menu">
	<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="https://creativevegancooking.com/about-cvc/">About</a></li>
	<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="https://creativevegancooking.com/about-cvc/rules/">Rules</a></li>
	<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="https://creativevegancooking.com/about-cvc/work/">Work with Me</a></li>
<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="https://creativevegancooking.com/contact/">Contact</a></li>
</ul>
</li>
</ul>

<div class="menu-item-search"><form method="get" class="menu-search-form" action="https://creativevegancooking.com/"><p><input class="text_input" type="text" value="Click Enter to Search" name="s" id="s" onfocus="if (this.value == 'Click Enter to Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Click Enter to Search';}"></p></form></div></div>

      Now add the following CSS in your stylesheet:

      .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul{
display:inline!important;
float:left;
}
.menu-item-search{
display:inline;
float:right;
}
    Thread Starter creativevegans

    (@creativevegans)

    Hi,
    Thank you CMSHelpLive! Unfortunately, it did not work. Here is the code I used to get it to work
    stylesheet:

    /* Search Bar */
@media screen and (min-width: 600px) {
	li.search { margin: 0; padding-top: 6px; float: right; }
}

    functions file:

    <?php
* @since Twenty Twelve 1.0
 */
function menu_search($items){
    $search = '<li class="search">';
    $search .= '<form method="get" id="searchform" action="/">';
    $search .= '<label for="s" class="assistive-text">Search</label>';
    $search .= '<input type="text" class="field" name="s" id="s" placeholder="Search" />';
    $search .= '</form>';
    $search .= '</li>';

    return $items . $search;
}
add_filter('wp_nav_menu_items','menu_search');

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Style Search Form in Menu Bar’ is closed to new replies.