WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] [closed] Add search box to Nav menu (19 posts)

  1. phoenixis
    Member
    Posted 1 year ago #

    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.

  2. jmlapam
    Member
    Posted 1 year ago #

    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;
    }
  3. phoenixis
    Member
    Posted 1 year ago #

    Thanks for the reply. Where do I add this?

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    That would goes to functions.php of your childtheme.

  5. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  6. phoenixis
    Member
    Posted 1 year ago #

    BEAUTIFUL! Thanks Paulwpxp!

  7. phoenixis
    Member
    Posted 1 year ago #

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

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  9. phoenixis
    Member
    Posted 1 year ago #

    That did it, Andrew. Thanks!

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    ( 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.

  11. Rich82
    Member
    Posted 1 year ago #

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

  12. jan.rok
    Member
    Posted 1 year ago #

    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

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  14. sallyruchman
    Member
    Posted 1 year ago #

    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

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @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.

  16. sallyruchman
    Member
    Posted 1 year ago #

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

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Then you need to start a new thread and include a link to your site.

  18. sallyruchman
    Member
    Posted 1 year ago #

    what do you mean?, i dont understand sorry

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Please read:
    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    This thread is old, marked resolved and unrelated to your theme.

    Start a new thread -
    http://wordpress.org/support/forum/themes-and-templates#postform

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic