How To Move Your Search Bar Into Your Navigation Menu

/

/ by
A couple of weeks ago I was asked about putting a search bar/button next to the Navigation Menu or Masthead Bar. It took me a while to work it out but in the end I did it so I'm going to share what I learned with you lovely people.



Before I start with my "how-to" I want to say that if you don't have a search bar somewhere on your blog you need to get one now. 

Far too often I'll be looking for a particular post on a blog and I'll have to search through loads of pages before I find what I'm looking for. This wastes my time and might dissuade me from returning to your blog. Please, please, please, have a search bar.

Lots of bloggers like to have their search bar in the sidebar and others like it to hover over the top of their page alongside the tabs. In this post I'm going to show you how to move your search bar from your sidebar and put it into your Navigation Mar at the top of your page (if you have one).



The first thing you're going to need is the code from your search bar.

Click on the spanner/screwdriver icon next to your search bar.

How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Find your search bar code.

A new window should open that contains your code.

How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Copy your search bar code for later.
Next you need to copy the code in the "Content" box. You can do this either by highlighting the text, right-click on your mouse, and hit 'Copy', or (if using a Mac) click inside the "Content" box, hit cmd A (all text will be highlighted), and then cmd C (this will copy it). 

Click Cancel and the window will go away without making any changes. That's what you want at this stage. 

Now you want to add that code into your Navigation Menu at the top, where your tabs are.

Again, find the spanner/screwdriver icon in your Navigation Menu.

Another window will pop up, this window will include all the code for your Navigation Menu, be careful not to change the wrong thing.

Go to the bottom of your listed tabs in the "Content" box and add a <li> underneath your current ones. 

Next, paste your search bar code into the box by right-clicking your mouse and clicking Paste, or press cmd V. 

Your search bar code should appear next to the new <li> you just typed in. Now you need to type </li> to close the tag.

When you've finished the code should look something like this:

How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Paste your search code into the widget.
Click Save.

Your search bar should've appeared in your Navigation Bar next to your last tab. 

It may look a little strange depending on your settings so you might have to edit some settings here. I had to alter some of my settings at this point too.

To test my changes before I actually do them I use the "Inspect Element" tool in Google Chrome.

On your home page right-click your search bar in the Navigation Menu and click on "Inspect Element".

How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Use "Inspect Element" to work out what you need to do.


This should bring up all the code on your site with the search bar code highlighted.

Look at the 'Styles' section and scroll down until you find the section that lists your Navigation Menu settings.



You can click in the width section and change the number, for example here I changed my width from 1000px to 1200px. After you've changed the number hit enter and see if the change is enough to make your search bar look okay in your Navigation Menu. If not, make another change. 

Once you're happy with your numbers make a note of them. 

Any change made here will NOT be saved. You need to take your noted numbers and edit them in your template.

Now that you have your numbers noted down go to Blogger - Template - Edit HTML.

***Please be sure to back-up your blog before attempting to change anything in your template!!!


How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Time to edit your HTML



Click inside the box and hit cmd F. A search box will appear in the top right corner.

In the search box type in NavMenu or whatever your Navigation Menu is called in your template. You should be taken to a section that lists all the details from before; the width/height of your Navigation Menu. 

This is where you make changes that will be saved so make sure you're changing the right numbers.

How To Move Your Search Bar Into Your Navigation Menu | Morgan's Milieu: Change the numbers to the ones you want.


Delete the '1200' (or whatever your template says) and replace it with the number you noted down from earlier.

As long as you've changed nothing else, hit save and check on your blog to see if the changes have appeared.

If you need to change the height too, go back to the "Inspect Element" part again and try out your numbers before altering your template.

Once you've finished you can remove the search bar from your sidebar by opening the window (like in the first step) and click "Remove". I would wait until you're happy with everything else before you remove the search bar from your sidebar.

Again, ALWAYS back up your template before attempting any changes.



The instructions listed are the things I did to move my search bar from by sidebar into my Navigation Menu.
All the changes were made by me to my current template.



If you like my posts be sure to follow me on Bloglovin (click the icon and make my day) , or find me on Facebook and 'like' my page to get updates on what I'm up to .



The Secret Diary of Agent Spitback


Brilliant blog posts on HonestMum.com

16 comments:

  1. Such a helpful and detailed post. Thank you for taking out time to write this. Much appreciated! :-)

    Fatima | www.blogsbyfa.com

    ReplyDelete
    Replies
    1. You're welcome Fatima, I was happy to do it. :)

      Delete
  2. Really helpful post as always. Thank you :)

    ReplyDelete
  3. Great tutorial, I'd be lost without the search function :) #abitofeverything

    ReplyDelete
    Replies
    1. Thanks, I think it's essential for a blogger to have one on their blog. :)

      Delete
  4. Fab tutorial, really easy to understand! My search bar never ever worked in Blogger, regardless of where I placed it and what I did to it. In the end I had to remove it, which I hated doing, so glad it works now I've moved! #sharewithme
    Debbie

    ReplyDelete
    Replies
    1. Oh no that's annoying! I've never had any problems with it, as far as I know. Glad you're happy with it now though Debbie. Thanks for stopping by and commenting. xx

      Delete
  5. Morgan this is brilliant so helpful. I really want to know how you got your navigation bar to stay at the top when you scroll though! I have managed to get mine at the top at least but it disappears when you scroll. Help, please! #abitifeverything #sharewithme

    ReplyDelete
    Replies
    1. Hehe. I didn't actually do that myself, it's all part of my template. However, I've been working on it today and have a post almost ready to write for you. Watch this space! ;)

      Delete
    2. Oh hou star!!! Let me know when it's ready please!

      Delete
    3. Should say you not hou sorry, still had my Dutch keyboard on Duh!

      Delete
  6. I had not even considered using a search option before now, but reading whay you have put, it does make complete sense to have one, so im off to see if I can get one to work. Wish me luck, Tracey
    P.s thanks for linking up, #abitofeverything xx

    ReplyDelete
  7. Fantastic tutorial. I just changed mine to the navigation bar it's so much easier to have it where everyone can see it right away and helpful too. Perfect laid out steps for someone like me that wouldn't have a clue where to start without blog posts like these babes. Love it. Thank you so much for linking up to Share With Me. I hope to see you again tomorrow for another great round. #sharewithme

    ReplyDelete
    Replies
    1. Thank you Jenny. I'm so glad people are finding the tutorials useful, it's what was missing when I started blogging. If I can help a blogger and make things easier for them then I'll be happy. :)

      Delete

Follow @ Instagram

Back to Top