Add a search box/bar to navigation menu in WordPress by 3 steps!

Watch this video on YouTube

Add a search box/bar to navigation menu in WordPress by 3 steps!


Step 1: Add the following code to header.php after navigation paragraph.


Step 2: Add the following code to style.css.


Step 3: Debug the code and make a fancy look on your site.



</catmee> 文章全部原创、谢绝转载,作者「BianLei」,如果喜欢欢迎分享链接,相关内容参见本站版权声明
本站相关:QQ空间 | 哔哩哔哩 | YouTube ★★★ 打赏:支付宝 ★★★
Tagged , . Bookmark the permalink.


  1. s0cKe says:

    Thank you very much! :D

    Exactly what I was looking for! :)

  2. Meia says:

    how can i change the search bar word to something else? Like I want it to be search Me or happy searching???

  3. Jorge says:

    My theme doesnt have a navigation paragraph on header.php
    How do i solve this ?

    • BianLei says:

      Hello, Jorge. This code here [] have effect on “where the search box would be seen”. You may try to put it in different paragraph until you think it is good.
      You could also continue to find the coding such as [] on your theme. It might be using a different name for navigation.

  4. Amy says:

    Hi. I was able to add the search box into my navigation bar but I can’t click inside the search box to type. Can you help? Thanks.

  5. Davide Calzoni says:

    Thank you Bian Lei! I was desperately looking for this and your video solved it all! You’re the best :) Keep on with your job!

  6. Anonymous says:

    Thank you! Easy to follow instructions that get the job done!

  7. Anonymous says:

    how can i add Advanced Woo Search in my header ?
    i can add the aws search but it is seems small. i want to big search.

    • BianLei says:

      You might need specified tutorial for Woo Search integration. For the appearance stuff, everything is related to the CSS file.

  8. Jacks says:

    Thanks for the code… It works great… I looked over some of the other options, but they were complicated and some of them didn’t work with my theme. I think it’s wrong to charge for a search box on Woocommerence, but I guess they want to make more money for using a free shop…

Comment Anonymously? No Problem! | 可以匿名评论了我会说?

Fill up Email address to subscribe reply and display your avatar from Gravatar (If any)