Search Bar in Menu

13 posts from 3 voices

• Started 1 year ago by CoffeeTalk
• Latest reply from Dude
• This topic is resolved

Tags:

• menu
• navigation
• search
• Widget

1. 

   CoffeeTalk
   Member

   Is there a way to place the search bar widget under the logo in the menu? How might I go about doing this? I know HTML and CSS, but no PHP, and relatively new to WordPress. Thanks for your help!

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   you can use the get_searchform function: http://codex.wordpress.org/Function_Reference/get_search_form to display the form anywhere you like. I'd add the code to header.php (i.e. after the menu div container) and then position it (position: absolute; left/right, etc.)

   Posted 1 year ago #
3. 

   CoffeeTalk
   Member

   Thanks for the lead! I'm not a PHP coder though, just a graphic designer so I've been struggling to understand some of this. Here's the section in header.php that I assume is responsible for the area I'm looking to insert the search bar into. Any help on where to insert the code would be much appreciated!

   <!-- ####### HEAD CONTAINER ####### -->
   <div class='container_wrap' id='header'>
   <div class='fancyborder'></div>
   <div class='container main_menu'>

   <?php
   /*
   * display the theme logo by checking if the default css defined logo was overwritten in the backend.
   * the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
   */
   echo avia_logo();

   /*
   * display the main navigation menu
   * modify the output in your wordpress admin backend at appearance->menus
   */
   $args = array('fallback_cb' => 'avia_fallback_menu', 'theme_location' => 'avia');
   wp_nav_menu($args);

   ?>

   </div>
   <!-- end container-->

   </div>
   <!-- end container_wrap_header -->

   <!-- ####### END HEAD CONTAINER ####### -->

   Posted 1 year ago #
4. 

   Chris Beard
   

   Hi,

   I believe you can paste your code after the "echo avia_logo();" part. Though I haven't tested it. The code you're pasting should look somewhat like

   <?php get_search_form( ); ?>

   Posted 1 year ago #
5. 

   CoffeeTalk
   Member

   Thanks Chris!

   I tried posting it directly under the echo avia_logo section, but it put the search bar behind the logo and menu and stretched it across the entire page, any suggestions? I appreciate all the help thus far!

   Posted 1 year ago #
6. 

   Chris Beard
   

   If you could link me to your page with this problem occurring I can give you some CSS code - you seem to have removed it. Your site is coffeetalk.com - right?

   Posted 1 year ago #
7. 

   CoffeeTalk
   Member

   Yes, it's coffeetalk.com and I would love to leave the issue up, but this is a live site and I can't leave a big problem like that up with readers visiting the site. If there's a specific time I could put the code in and let you look at it, that would be alright. I just can't have something like that live on the site for an extended period of time. We want to put the search bar directly underneath the logo in the menu on all pages across the site. I wouldn't even know how to keep it to one single page since I think the menu is controlled dynamically by the theme.

   Posted 1 year ago #
8. 

   Chris Beard
   

   Hey,

   You can put the code I previously provided right ABOVE the "echo avia_logo();" and then add this to your custom.css:
   

   .main_menu #searchform {
       position: absolute;
       top: 150px;
       width: 250px;
   }

   Let me know if it works :)

   Posted 1 year ago #
9. 

   CoffeeTalk
   Member

   Almost there! The search bar is under the logo, but it's appearing at the bottom of the menu instead of right under the logo. I altered style.css to change the height for the logo from 100px to 56px (that's how large the image is) but it didn't seem to help. Perhaps I altered the wrong bit of CSS?

   #top .bg-logo, #top .bg-logo a{
   text-indent: -9999px;
   height:56px;
   width:190px;
   }

   Posted 1 year ago #
10. 

    CoffeeTalk
    Member

    I tweaked the CSS to get it where I wanted it, thanks for all your help! The client demands I make the search bar more 'obvious' because apparently you need to be able to see it from 20 feet across the room in all primary flashing colors. Where would I look to change the box background? Thanks!

    Posted 1 year ago #
11. 

    Dude
    Dude

    Hey,
    you can change the searchform bg color with following code:
    

    #searchform div {
        background: #F2F2F2;
    }

    Posted 1 year ago #
12. 

    CoffeeTalk
    Member

    Thanks so much for all your help!

    Posted 1 year ago #
13. 

    Dude
    Dude

    Glad that I could help you :)

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.