add search box in primary menu (7 posts)

  1. befree22
    Posted 3 years ago #

    I'd like some help adding the Search box inside the main (primary) menu on http://tmmcom.dreamhosters.com/. Right now it displays below the primary menu.

    I used this code in the functions.php to add the search box.

    I read http://wordpress.org/support/topic/add-a-searchbox-to-navigation-bar?replies=16 and used the css code for the site. I doubt that the 10, 2 reference in this code is the problem:

    add_filter('wp_nav_menu_items','search_box_function', 10, 2);

    I used the form code at http://stackoverflow.com/questions/6762901/get-search-formwordpress-in-a-placeholder-web-form for the header.php

    I'm using this WordPress child theme. This theme has 2 menus (one above the header and one below). My target is the primary/main menu, not the menu below the header.

  2. curlybracket
    Posted 3 years ago #

    You shold do this simply using CSS imho.
    For example, make your header

    position: relative

    then make the searchform

    position: absolute; bottom: 0; right: 0;

    and leave some padding-right on your menu, so menu entries won't go under the searchbox.

    This is just one way to do it.

    No need for complicated code here.

  3. befree22
    Posted 3 years ago #

    I added the

    #header {
        position: relative;

    I then added the position: absolute; top: 145; right: 140; to this css (see below) and the search box is now appearing inside the nav menu bar on the right margin.

    #searchform {
    	color: #fff;
    	float: right !important;
    	border: 0 !important;
            position: absolute; top: 145px; right: 135px;
    	padding: 10px;
            background: #FEC42D;
            width: 240px;

    It works, thanks to your input. Now I'd like the search box to appear on the left side of the primary menu. I used float: left; but the box never moved to the left margin. I then used this and the search box appears on the left margin but it hides the navigation pages "Home" and "Sample Page":

    position: absolute; top: 145px; left: 135px;

    I want the search box to appear inside the primary menu on the left margin. Any other css tricks to do this? Or do I have to make a change to the code for the nav pages?

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    For CSS-specific queries, consider CSS-specific forums.

  5. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Try this -- move the menu items over by adding the margin-left:

    .main-navigation {
        margin-left: 250px;

    The remove all the absolute positioning -- that's not the way to go -- use float: left, change the width and a negative top margin to move it up:

    #searchform {
        background: none repeat scroll 0 0 #FEC42D;
        float: left !important;
        width: 240px;
        margin-top: -50px;

    But do be aware that all this fooling around with the layout and adding elements willy nilly may be wrecking havoc with the responsiveness of the original theme code...

  6. befree22
    Posted 3 years ago #

    I used Firebug's Inspect Element and Web Developer's Tools to find the code in the Twenty Twelve parent theme. On line 1393, I found the css for the nav bar positioning so I added the following code to the 2012 child theme's custom css file:

    @media screen and (min-width: 600px)
      .main-navigation ul.nav-menu,
      .main-navigation div.nav-menu > ul {
        text-align: right;

    When I use Firebug, the menu items (Home, Sample page) appear as desired -- aligned on the right margin and the search box on the left margin as I want it. However, the css changes don't appear on my browser. I experienced the same issue when I loaded the site on another computer.

  7. befree22
    Posted 3 years ago #

    @WPyogi It works beautifully!

    I used Firefox Web Developer Tools > Responsive Design View. And you're right about the responsive view -- the top navigation links don't appear on 360x640 or lower screens; only the search box appears. I will say that the pages do appear in the footer widget though.

    I checked the theme (without this css code) to see if it supports 360x640 and lower. It doesn't (the top navigation links don't appear) so I'll inform the theme's author because many themes support lower resolution.

Topic Closed

This topic has been closed to new replies.

About this Topic