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.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

90 comments

  1. Audrey Williams on

    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?

    Reply
  2. Audrey Williams on

    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!

    Reply
    • Ellie M on

      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 πŸ™‚

      Reply
    • Ellie M on

      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 πŸ™‚

      Reply
      • Audrey Williams on

        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!

        Reply
        • Ellie M on

          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.

          Reply
    • Ellie M on

      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!

      Reply
      • Lindsay on

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

        Reply
        • Elaine M on

          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;}

          Reply
  3. Wanda Barefoot on

    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

    Reply
    • Elaine M on

      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.

      Reply
  4. Jennifer on

    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!

    Reply
    • Ellie M on

      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="" πŸ™‚

      Reply
    • Ellie M on

      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.

      Reply
  5. Matthew on

    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?

    Reply
    • Elaine M on

      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.

      Reply
  6. frenchell on

    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.

    Reply
    • Ellie M on

      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?

      Reply
  7. Jordyn Brazil on

    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

    Reply
    • Ellie M on

      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 πŸ™‚

      Reply
      • Jordyn Brazil on

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

        Reply
        • Elaine M on

          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 πŸ™‚

          Reply
      • Udit on

        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.

        Reply
  8. Bethany on

    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

    Reply
    • Bethany on

      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 πŸ™‚

      Reply
  9. Jason on

    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?

    Reply
  10. Kayleigh on

    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 πŸ™‚

    Reply
    • Elaine Malone on

      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;}

      Reply
      • Kayleigh on

        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! πŸ™‚

        Reply
  11. Georgia on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  12. Mickie on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  13. Andrea Olsson on

    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

    Reply
  14. Christine on

    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?

    Reply
    • Elaine M on

      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.

      Reply
  15. Natalie @ Obsessive Cooking Disorder on

    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! πŸ™‚

    Reply
    • Elaine M on

      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 πŸ™‚

      Reply
  16. liv on

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

    Reply
    • Elaine M on

      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.

      Reply
  17. gocebe on

    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 πŸ™‚

    Reply
  18. KAYLEIGH on

    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 πŸ˜€

    Reply
  19. rachel on

    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!

    Reply
  20. Tia on

    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?

    Reply
  21. Liv on

    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!

    Reply
  22. Julie Mason on

    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.

    Reply
    • Elaine M on

      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.

      Reply
  23. Lauren Alston on

    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.

    Reply
  24. Vanessa on

    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.

    Reply
    • Elaine Malone on

      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!

      Reply
  25. Mary on

    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!

    Reply