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空间 | Facebook
Tagged , . Bookmark the permalink.

2 Ways to notify WordPress comments author upon their replies without plugins
2 Ways to notify WordPress comments author upon their replies without plugins

Dying Light achievement: Homo Homini Lupus Est, where to find survivors and Rais’s men
Dying Light achievement: Homo Homini Lupus Est, where to find survivors and Rais’s men

Dying Light – How to cheat in Bozak Horde, unlimited challenge timer
Dying Light – How to cheat in Bozak Horde, unlimited challenge timer

How to Cloak Affiliate Links in WordPress without Plugin
How to Cloak Affiliate Links in WordPress without Plugin

My 3 days itinerary in Shenzhen: People, places, and first impression
My 3 days itinerary in Shenzhen: People, places, and first impression

COMMENTS: 15

  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.

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

Fill up Email address to subscribe reply and display your avatar from Gravatar (If any)
填写邮箱即可显示您在Gravatar的头像