Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #7161

    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!



    you can use the get_searchform function: 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.)


    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’>



    * display the theme logo by checking if the default css defined logo was overwritten in the backend.

    * the function is located at framework/php/ (Purchase code hidden if logged out) .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’);




    <!– end container–>


    <!– end container_wrap_header –>

    <!– ####### END HEAD CONTAINER ####### –>



    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( ); ?>


    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!


    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 – right?


    Yes, it’s 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.



    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 :)


    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;


    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!



    you can change the searchform bg color with following code:

    #searchform div {
    background: #F2F2F2;


    Thanks so much for all your help!


    Glad that I could help you :)

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Search Bar in Menu’ is closed to new replies.