Putting search bar in menu

10 replies
  • WEB DESIGN
  • |
Should I put my search bar in menu? this will free up some space in sidebar. If yes, can someone let me know how to do it?

my site; www.fat2fitsteps.com
#bar #menu #putting #search
  • Profile picture of the author digitalcows
    Yes, the search bar would look better in the Navigation bar if you want to free up some space in the sidebar.
    Signature

    Your Responsive Web Design and Development Team | Website:Digital-Cows.com
    Email: moo@digital-cows.com
    Skype: Digital-Cows | Twitter | Facebook

    {{ DiscussionBoard.errors[7978424].message }}
  • Profile picture of the author Patrick
    Santr123,

    I can tell you how to do it, but first, do you know HTML, CSS and the Wordpress Codex ?

    If no, then even if I tell you, you won't be able to do it...
    {{ DiscussionBoard.errors[7979076].message }}
    • Profile picture of the author Santr123
      Yes, I do know HTML and CSS. Not very familiar with PHP though. Give me some guidance and I will give it my best shot

      Its frustating because I am using Free Neuro theme from Cyberchimps and they refuse to help me saying customization is reserved for PRO members...
      {{ DiscussionBoard.errors[7979129].message }}
  • Profile picture of the author Patrick
    Code:
    <div id="fullmenu" class="nine columns">
    // menu code here
    </div>
    <div id="search" class="three columns">
    //search form here, try using get_search_form();
    </div>
    use it between the class rows...
    {{ DiscussionBoard.errors[7980000].message }}
    • Profile picture of the author Santr123
      Where do I put this code. What are nine columns and three columns?
      {{ DiscussionBoard.errors[7980792].message }}
      • Profile picture of the author Istvan Horvath
        Originally Posted by Santr123 View Post

        Yes, I do know HTML and CSS.
        vs.
        Originally Posted by Santr123 View Post

        What are nine columns and three columns?
        No, you don't (know HTML & CSS).
        Those are classes. If you don't know what classes are in HTML/CSS... then hire somebody to do it for you. Or take a crash course in CSS!
        Signature

        {{ DiscussionBoard.errors[7981769].message }}
        • Profile picture of the author Santr123
          I know these are classes. I was just wondering where are these classes defined.?

          IF, I put the get_search_form(); after the menu code.
          the search box shows below the menu bar.


          If I put get_search_form(); before the menu code, search box shows above the menu bar.

          But it never shows on the menu bar.

          ALso the alignment is not ok. Will keep trying or I shall find some new theme..
          {{ DiscussionBoard.errors[7986897].message }}
      • Profile picture of the author Patrick
        Originally Posted by Santr123 View Post

        Where do I put this code. What are nine columns and three columns?
        I had told you that if you don't know HTML/CSS and Wordpress Theme Codex, then you won't be able to do it even if I tell you how to do it..
        {{ DiscussionBoard.errors[7981880].message }}
  • Profile picture of the author David V
    Your going about this wrong. The understanding of the "grid" is what matters here as pointed out by @schwarzes.

    Doesn't matter...really...it is what it is.

    You need to change the "fullnav" ID to "nine" and not twelve. Twelve is full width. The search box could then be "three" which added to "nine" give you the full width of "twelve" inside the id="fullmenu" div.

    This is what it would look like:
    (I removed all the menu ul's and li's for clarity)
    Code:
    <div id="fullnav" class="nine columns">
    	<div class="menu-my-custom-menu-container"><ul id="fullnav_menu">
    		<blah blah blah, this is the ul and li menu items........>
    	</div>
    </div>
    <div id="search-box" class="three columns">
    	<form method="get" class="searchform" action="http://www.fat2fitsteps.com/">
    		<div id="magnify">
    			<img src="http://www.fat2fitsteps.com/wp-content/themes/neuro/images/magnify.png" alt="magnify">
    		</div>
    		<div>
    			<input type="text" name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';">
    		</div>
    		<div>
    			<input type="submit" class="searchsubmit" value=""></div>
    	</form></div>
    </div>
    This will give you the result you want. See thumbnail.
    {{ DiscussionBoard.errors[7989340].message }}

Trending Topics