Add a search bar to your navigation menu

Another highly requested tutorial for you today on adding a search bar to your navigation menu on Blogger. It’s a good way to integrate a few things into one navigation bar to save on space and help your readers find what they are looking for. My next tutorial will show you how to add social media icons to your navigation bar also so keep an eye out for that. As always if you have any questions, leave them below.

Always backup your blog before making changes

Find out how to backup your entire blog including your template here.

1. Search bar code

You can add this code anywhere on your blog to add a search bar or create your own code using Googles Custom Search.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

2. How to add to Navigation bar

If you have a custom navigation bar like the one shown in my previous tutorials such as the drop down menu that can be styled using template designer then add the search bar code before the following code. To customise the search bar see step 3 below.

</ul> <!-- end navmenu -->

We’re adding it before </ul> so that it’s part of the list without being a list item <li> ... </li>. To learn about lists check out this beginners guide to HTML post.

If using pages gadget

If you’re using the pages gadget and you want to add a search bar to it, go to Template > Edit HTML > Jump to Widget > PageList1. Expand the code by clicking the arrows on the left beside the numbers and you’ll see something similar to the following. Add the search box code to the highlighted area.

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>

<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
<!-- SEARCH BOX HERE -->
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

If using links gadget

If you’re using the link list gadget and you want to add a search bar to it, go to Template > Edit HTML > Jump to Widget > LinkList1. Expand the code by clicking the arrows on the left beside the numbers and you’ll see something similar to the following. Add the search box code to the highlighted area.

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
<!-- SEARCH BOX HERE -->
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Styling the search box

To position it on the right of your navigation bar, go to Template > Edit HTML and find ]]></b:skin> and above that add the following

#searchThis {float: right;}

Style the search box using

#searchBox { }

and style the button using

#searchButton { }

To remove border from search box
Add to your CSS (Template > Edit HTML > above ]]></b:skin>)

#searchBox {appearance:none; -moz-appearance:none; -webkit-appearance: none; border: 0px;}

To add an image instead of the search button
Replace the following

<input id="searchButton" value="Go" type="submit" />

with the following

<input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" />

Replace DIRECT IMAGE LINK with the link to your image.

Buy me a coffeeBuy me a coffee

90 Comments

  1. I’ve been looking for this everywhere! You are amazing! I’ve put the search bar in and now customizing it is the problem. I have a search bar currently and I’d like the styling of that one.

    I copied that code and put it in the #searchtag {} brackets but it doesn’t quite work. It doesn’t replace the old one, just adds the new one awkwardly.

    Any ideas?

  2. Okay, so I’ve tried that and still the same. I’ve left it up for you to see. I can’t believe how helpful you’ve been. I need to recommend this blog or something. It’s great!

    1. Happy to help! Ah okay – I see a couple of errors but can’t really tell what they are from here. Can you add *****[at]gmail.com to blog permissions under settings and I’ll take a closer look for you 🙂

    2. Accepted the invite, can you change “author” to “admin” beside my name/email. This gives me access to your template 🙂

    1. Fixed. You had a couple of errors in your CSS such as embedding selectors, using HTML code, etc. This post explains the CSS section of Blogger if you’re interested. It should be working how you wanted now though? Fab style bdw, following on Bloglovin 🙂

      1. Thanks girl! I’m going to find you on all social media and stalk you now. Haha. It looks great. I just might try to figure out how to remove the “go” button so that it looks more sleek (tips?) But I love it. Thank you so much!

        1. The easiest way is adding display:none; before the closing bracket of #searchButton in the CSS. The user can hit enter on their keyboard to search instead of clicking the “go” button. I’d recommend mentioning that though just incase they don’t realise, so for example you could find the code in step 1 and the part that says value="Search this blog" and change it to value="Type & hit enter to search" or replace the “go” button with the search icon you have.

  3. I can’t figure out how to move it over further to the right and how to chance the “Go” button. Any tips? Thanks!

    1. To move it over to the right add #searchThis {float: right; margin-top:8px; margin-right: 50px;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;} above </b:skin> in Template > Edit HTML or to just slightly move it over add #searchThis { margin-left: 70px; }. I don’t know how you want it style but you can use the code in step 3 to do so – for example to have it as a flat white button you’d use #searchButton {background: #FFFFFF; -webkit-appearance: none; border: none; }. Hope this helps!

      1. This is awesome. Thank you! Now I’m having an issue with my navbar because the text looked a little wonky in the middle because it wouldn’t center itself after I moved the search bar over to the right. I feel like maybe now it looks better on the left, but I can figure out how to position the text with a little more padding on the left hand side.

        Also for the search bar if I want to turn the ‘go’ button into a magnifying glass icon, how do I do that instead? And change the font in the search bar and take away the gray shadow outline in the box?

        Sorry for all the questions, but I really appreciate the help!!

        1. Hello. Apply padding-left: 10px; to the text part of the navigation. To replace the go button with an image, replace <input id="searchButton" value="Go" type="submit" /> with <input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" /> and then replace DIRECT IMAGE LINK with the link to your image. To remove the border add #searchBox {appearance:none; -moz-appearance:none; -webkit-appearance: none; border: 0px;}

  4. I tried adding the code to change the look of the button but it didn’t work. What I really would like to know is can you tell me EXACTLY how to add an image for a button instead?

    Thank you, Ellie. You have the BEST tutorials!

    Wanda

    1. Thank you very much! Replace <input id="searchButton" value="Go" type="submit" /> with <input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" /> and then replace DIRECT IMAGE LINK with the link to your image.

  5. Hi Ellie,

    I used the “add to navigation bar option” because I had already created a navigation bar from one of your previous posts (you’re the best!). I wanted to add a little picture of a magnifying glass instead of the search button. Is there a way to do this?

    Thank you!

    1. Hello, yes you can add it as a background image in the CSS for the button and remove the value GO in the code leaving it blank so that it reads value="" 🙂

  6. Hi, I’ve done mine but now whenever I hit enter after searching and it goes to the pages, everything in my sidebar disappears?

    1. Hello, this can be caused by a few things – sizing, incorrect code in the post area, broken links. If you want to add ****@gmail.com to your Blog Permissions in Settings, I can take a look for you.

        1. Accepted, can you go back to settings and change the label beside my name from “author” to “admin”. This gives me access to view your code. I’ll have a look and get back to you asap. Thank you!

  7. Hi, I recently created a navigation menu from your other post, and using this one I found a search function that I added per your tutorial. But once I’ve added it, the search box will only appear on a second line of the nav bar. I’ve tried everything I could think of to move it up onto the same line as my tabs but I can’t seem to get it to work. Could you help me out?

    1. Hello. Make sure the search box is within the list, before the closing </ul>, otherwise it will go underneath it. An alternative is to set a width for the menu and a float it to the left, add a width for the search box and float it right… but that involves a lot more code.

  8. Do you possibly have something like this tutorial for WordPress? My website needs a search bar and the one they provided had it in the most awkward of places twice on every page, so I removed it.

    1. Instructions would depend on the theme/template you are using as it can be different for each. There’s numerous ways to do it. What template/theme are you using?

  9. Hey there! I am SO glad to have found this treasure of a blog! I just purchased a new template for my blog and it is a MESS. I’m trying to fix some of it now myself rather than paying a ton to get the designer to fix it all. Your blog has helped me so much and I thought that while I’m here I might as well add a search box, too! Do you know how to remove the original box that you provided the code for? I added an outline of my own and just can’t figure out how to get rid of that original box/outline.

    Also, any tutorials on adding a footer to a blog template in the works?? 😉

    Thanks so much
    Jordyn
    http://www.shewhofears.com

    1. Hello Jordyn, thanks so much. Glad you’re finding my blog helpful. Add the following to your CSS input[type="text"] {border: 0px solid #ddd; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); }. Yeah have a few tutorials for footers coming up 🙂

      1. Ellie, thank you so much for a quick response! Seriously, your blog rules. I appreciate how easy it is to navigate and the tutorials are super helpful!

        After getting rid of the search bar completely, I decided to completely restart. I added the text you provided and the box is still there. I’m wondering if maybe I added it to the wrong place? I put it here:
        #searchBox {input[type="text"] {border: 0px solid #ddd; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); } }

        Again, thanks so much for your help (and patience!!!)

        1. Hello, it should read input[type="text"] {border: 0px solid #ddd; -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); -moz-box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); box-shadow: inset 0 0px 0px rgba(0,0,0,0.1); }, without the #searchBox 🙂

      2. Hi Ellie,
        Can you please help me with my blogger template, i have messed it all and i also have to change the search bar in navigation bar to google custom bar also can you please help me to remove broken and unused css codes from my template.I would be highly grateful.I have invited you as an admin please have a look.

          1. If you are looking for advice for why the above tutorial is not working on your blog, then I am happy to help by checking if something in your template is causing the issue, as I’ve done for others. If you want me to cleanup your template (remove broken and unused css) then this is a service 🙂

  10. Hi Ellie,

    I’m so glad I came across your blog, it’s been so helpful!

    I was wondering if there was a way to make the search bar also search for labels, as well as text within the blogpost? For example, I have lots of posts with the label ‘travel’, but they might not actually say ‘travel’ within the text for the post. Is there any way to make both posts with the word ‘travel’ in the post and posts with ‘travel’ as a label show up when the user searches ‘travel’? At the moment, only posts with the word in the body of the post are showing up.

    Hope that makes sense!

    Thanks,
    Bethany

    1. Hi Ellie,

      Just letting you know I’ve found a solution! If you want your search bar to search for labels, rather than text within the actual post, you change

      <input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" />

      to

      <input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="label" />

      so basically you change name=’q’ to name=’label’ 🙂

      I haven’t figured out how to search for both labels and text within the actual post content, but I’m working on it!

      Thanks,

      Bethany 🙂

  11. Thank you for this tutorial! I think i did it correctly up until the styling part. I have no idea that is.
    #searchBox { }
    #searchButton { }
    Could you help me make it more aesthetically pleasing for Blogger’s Simple template?

    1. Hello Jason, you don’t need to add much as it’s in your navigation bar which is quite simple at the moment. Something like searchBox {padding: 5px; border: none; font-family: FONTNAME; } would work well, change FONTNAME to match your blogs font.

  12. Hi, I stumbled across your blog last night and since I’m currently trying to redesign my blog, you have been an absolutely fantastic help; so thank you so much! Your tutorials are so easy to follow and clearer than many of the others I have used.

    I have managed to get a search bar into my pages tab and have positioned it; I’ve tried to add a link for a search button image but it didn’t seem to work. I was wondering what html code I would need to input if I would like to change the font of the ‘Search this blog’ and make the box a little bigger. If possible can you make the edges slightly rounded and change the colour of the box?

    I’m quite new to html and I have already learnt so much from your blog in just one night, so sorry if this is a really simple thing.

    Thanks in advance 🙂

    1. Thank you very much Kayleigh, your blog looks great! Add the following to your CSS, change FONTNAME and HEXVALUE and adjust the other values to suit your preference #searchBox {font-family: FONTNAME; padding: 5px; width: 150px; border-radius: 10px; background: #HEXVALUE; border: none;}

      1. Thank you so much! That was ridiculously easy to do and I love it. I really appreciate your help and I have subscribed to your blog so I can update mine when you publish fancy new tutorials on stuff I didn’t even know was possible. Thank you! 🙂

  13. Hi! I love your tutorials and as I have no idea about coding, they have been extremely helpful.
    I managed to add the search box in the navigation bar and change its colour so that its the same with the navigation bar but I’m having trouble changing the font colour of “Search”so that it’s white.
    Also, I would really appreciate it if you could explain how i can add the search icon on the left hand side of the search box!

    Thanks!

    1. Hello. Thank you 🙂 To change the colour add #searchBox {color: #FFF;} to your CSS, to add a search icon on the left add background-url: ("DIRECT IMAGE URL") no-repeat 10px center; after #searchBox { and replace DIRECT IMAGE URL with the link to your image.

  14. Thank you so much for this! I’ve recently been re-branding my blog and was having troubles remembering how to code, as I haven’t really done any since I was a kid playing Neopets. (Oh, how I wish that was a joke…)

    My question is how to go about adding an image instead of text for the “go” button? My instinct is to do some sort of ‘img src =’ as I’m not as familiar with css… so how would I manage it?

    These guides are amazing, by the way!

    1. Hello! Thank you very much. Yes, replace <input id="searchButton" value="Go" type="submit" /> with <input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" /> and then replace DIRECT IMAGE LINK with the link to your image.

  15. thanks for the tutorial! I was wondering if I could make the icon I’ve put inside the search box be clickable as the submit button.

  16. Hi! Thank you for all the blog tutorials, thanks to your website i’ve been able to design my blog all by myself, I’ve learnt so much!
    I just have one question, how do you get the archive widget into my customized navigation bar? i’ve managed to add the search bar but i have no idea how to get the archive in there!

    Best regards, Andrea

  17. Thanks for the tutorial! I have replaced the go button with an image through “type = image” and then src but part of the image is cut off at the top. How would you fix that?

  18. I can’t add this code to my blog… At least i don’t know where to add the code for the navigation bar.

    1. Hello Racic, you are using a pages gadget so you go to PageList1 and add it above the closing ul, as showing below the “If using pages gadget” heading. Hope that helps.

  19. Hi,

    Your blog has been really helpful. I’m trying to customize my search bar on my navbar, but it won’t change style when I add your codes to the css portion of the blogger. I can’t figure out what’s wrong.

    I adapted some other codes and while I can get it to work on the side bar if added as its own widget, I cannot get it to show up on my sticky navbar. Any help is appreciated, thanks! 🙂

    1. Hello, thank you so much! You’re missing some code for closing #stickynavbar which is blocking the CSS for the search bar right below it. Once you close it properly the CSS for the search bar should be read and display correctly 🙂

  20. HI ELAINE!
    I TRIED PASTING MY #SEARCHBUTTON { } BEFORE MY B SKIN THING BUT IT DOESN’T WORK, NO MATTER WHAT I DO! PLEASE HELP!!

    1. Hi Liv, the code isn’t currently on your blog so I can’t check it for you but you are missing a semi-colon on .tabs-inner .widget ul { text-align: center} which may be blocking other CSS.

  21. Great tutorial! Thank you very much. I was trying to do it but then I found your site and it just solved the problem. Thank you for your time 🙂

  22. Hi Elaine,

    You helped me before on this thread last year and I’m now in the middle of totally redesigning my blog, you’re my virtual best friend and you don’t even know it! 🙂

    I’m struggling with the css of the #searchBox, in that it just doesn’t seem to be reading what I’ve input. I’ve added it to a fixed bar from another of your tutorials. Any ideas what could be blocking this? I can’t see any errors in my code, but I’m not a pro so I could be missing something.

    Thanks in advance 😀

    1. Yay, besties!! 🙂 new design looks great – so beachy / summery! You’re missing a closing bracket above #navigationbar and above ]]> </b:skin>.

  23. I used this code for my search box a few days ago and stupidly, didn’t back up my template and ended up deleting my box when trying to find a way to delete the “Search this blog”. Now, for the life of me I can’t quite find the code you give in part 2 for the custom navigation feature. I’ve tried almost everything I can and nothing seems to work, any help would be much appreciated!

  24. Hello there, so I’ve tried adding this only to find out that there is no pages nor link list to add it to on my blog?
    I used the html gadget to create a custom navigation menu. Can you tell me what’s wrong and how I could proceed to adding the search to my navigation menu?

  25. Hi elaine!
    This Tutorial is amazing! I was just wondering if there was a way to make the font in the search box bigger? Thank you!

  26. Hi Ellie! Thanks so much for all your helpful tutorials! They’re really helping me start organize my new blog. I’ve been able to install my scrolling nav bar thanks to you but am having a little trouble with a couple of things. I’ve tried installing the code you listed to put my links on the left & my social media icons on the right but it just kept making the icons disappear so I had to remove it. Also- I was using this tutorial to install a search button on my scrolling nav bar but I’m not locating this ( ) code to start the process. Can you help?

    Thanks so much, Ellie!

    sorry i just now read the part about leaving code in the comments- I meant to say I can’t find the code you mention in step #2.

    1. Hello. Remove the HTML from the CSS section of your template. Find #navigationbar in your CSS and change left:200px back to left:0px, also change width: 1000%; back to width: 100%;. That’s what is causing your issues. Now you can add .tabs-inner .widget ul {margin-left: 0px; margin-right: 0px;} .navleft {float: left;} .navright {float:right;}. The code in step 2 will be in the gadget you added for the navigation menu.

  27. Thank you! I’m just starting to customize my blog and your instructions are clear and straightforward. Thanks a lot!

  28. Hello, I’ve been using your tutorial to redo my blog (they are amazing), but with this tutorial I cannot figure out how to line up my search box with the text, or how to use the #SearchBox tools. Do I just insert them as is in my HTML? Whenever I try that it just shows up as text at the top of my blog.

  29. I was wondering if you could give a tutorial on how to use jquery specifically for sliding down the search box in the navigation menu.

    1. Hello Vanessa, a tutorial for this on Blogger will be live tomorrow. I can also do one for WordPress if that’s the platform you are on? Same technique applies. Hope you like it!

  30. Hey XOMISSE!
    I used your code in my blog and it was working very well, however I accidentally messed with the code. Although I have deleted and pasted the code again, the search bar is not appearing.
    Help would be very much appreciated!

Sorry, comments are closed!