Support » Theme: Twenty Twelve » Add search box to Nav menu

  • Resolved phoenixis

    (@phoenixis)


    Hi All,

    I’m trying to move the search box to my nav menu. My site is at http://www.readingrelics.com. No matter where I enter the following:

    <div class="header-search"><?php get_search_form(); ?></div>

    It either puts the search box above or below the nav bar, not inside it. How can I get it so the search bar appears next to “Contact Us”?

    *Note: I’m not using child themes at the moment, I will be fixing that shortly.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Try this an enjoy 🙂

    add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
    function add_search_box_to_menu( $items, $args ) {
        if( $args->theme_location == 'primary' )
            return $items.get_search_form();
    
        return $items;
    }

    Thanks for the reply. Where do I add this?

    paulwpxp

    (@paulwp)

    Font hero

    That would goes to functions.php of your childtheme.

    paulwpxp

    (@paulwp)

    Font hero

    Here is a CSS way of doing it that will goes with your currently used method. Again, it will goes to style.css of the child theme.

    .header-search {display:none}
    
    @media screen and (min-width: 600px) {
    	.header-search {display:block;float:right;margin-top:-40px;}
    }

    All modifications must be done via child theme only.

    BEAUTIFUL! Thanks Paulwpxp!

    Oh wait, no. I can’t click into the search box?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Don’t use minus margins. It’s going into general CSS now…

    .main-navigation {
     position: relative;
    }
    
    .header-search {
     /* (remove float:right;margin-top:-40px;) */
     display: block;
     position: absolute;
     top: 0;
     right: 0;
    }

    That did it, Andrew. Thanks!

    paulwpxp

    (@paulwp)

    Font hero

    ( I post this just for the record, in case it might be useful for someone. )

    .header-search {display:none;}
    
    @media screen and (min-width: 600px) {
    	.header-search {
    		display:block;
    		float:right;
    		position:relative;
    		margin-top:-40px;
    	}
    }

    It’s the same exact code above actually with a fix for “can’t click on”, normally elements that follow down the document will have higher z-index and in this case it does so but the “clickability” won’t restore, have no idea why, until the position relative is added.

    Thanks Paulwpxp! That’s very helpful. I applied it to my website and it looks good in my menu charmandrich.com

    Please, help me: I use code from jmlapam and paulwpxp, but my search box is still above the navbar and still centered. I use childtheme.
    Thanks

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    @jan.rok,
    You can discuss that in your own thread.

    sally

    (@sallyruchman)

    Hi!, i am using wordpress with elegant themes, and i tried all what you wrote here, but i cannot still get the search option in the menu bar, please help me…

    thanks

    @sallyruchman – CSS is theme/site specific, so this thread is irrelevant if you are using a different theme. You need to contact Elegant Themes for help with a commercial theme – we don’t have access those.

    sally

    (@sallyruchman)

    they said is beyond their support… there is nothing i can do?, please…

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Add search box to Nav menu’ is closed to new replies.