Primary Nav

Add a search box in the top navigation of Canvas

Search box taking up too much room in your sidebar? Put it way up in the top navigation of Canvas.

This one took a little digging as I tried using the code to get the search box in the primary navigation, but it turns out that the top navigation doesn’t have a hook to put in a function easily so they had to recreate it. Thanks to the WOO help documentation where I found this gem of code below.

Here’s the code for the functions.php file:

This is for the CSS file.

Here’s a screenshot of the final product.

It takes a bit more code, but still gets that search box up into the top navigation, way up there.

It takes a bit more code, but still gets that search box up into the top navigation, way up there.

Top nav is floated right and search on the left? Here’s the fix.

If, however, you have that top nav aligned or floated right, the search box will show up to the left of your (right-aligned) nav. If that works for you, you’re done. If you’d like that search box way over to the right, here’s the functions code you’ll need and the CSS.

If you float your nav right, you'll want to switch the order of things in the functions file.

If you float your nav right, you’ll want to switch the order of things in the functions file.

For the functions file:

For the CSS file, we just floated the nav to the right.

Anything else?

, , , ,

19 Responses to Add a search box in the top navigation of Canvas

  1. Aimee August 20, 2013 at 11:15 am #

    Wonderful!! Many thanks for this.

    Now, I just have one last question if you’re up for it. My top nav is right-aligned and the search bar is sitting to the left of the menu items. Is there a tweak that would move it to the right side of the menu items? Would it just be a matter of CSS?

    Thanks again!

    • Bradley Charbonneau August 22, 2013 at 5:38 pm #

      Hi Aimee,
      I just updated the post above. Basically, I changed the order of things in the functions.php file. Hope that works!

  2. paul August 22, 2013 at 2:12 pm #

    Thanks for this man, but I’m not seeing the search bar at all. Any ideas? Plugin related prob? Is there some theme option I forgot to select?

    • Bradley Charbonneau August 22, 2013 at 5:45 pm #

      Hey Paul, Did you happen to float the top nav to the right? When I do that it disappears, but then see the latest float right CSS above. Can you see your nav but then when you add the search it doesn’t work? Hmm.

  3. Meg December 1, 2013 at 12:26 am #

    Hi Bradley

    Thanks for this post … I am having the same problem as Paul … when I add the code to the functions.php & css files, I cannot see the search form. I have not added any float to the top menu. Any suggestions as to what I have missed would be hugely appreciated!

    • Bradley Charbonneau December 4, 2013 at 9:53 pm #

      Hi Meg,
      Can you see it at all if you play around with the CSS a bit? For example, remove this: #top .nav {float:right;}? Or maybe is your navigation too long? Or … I’m just guessing. Hmm.

      • Meg December 5, 2013 at 2:19 am #

        Hi Bradley … thanks for your reply … I figured it out – I did something odd in the functions.php file … its all good now! Your site is an absolute treasure trove of great info for customising the Canvas theme – I really appreciate it.

        • Bradley Charbonneau December 5, 2013 at 8:38 am #

          Glad you figured it out. Was it something that I could have helped with in your functions file? Or probably just an empty space or something? Thanks for coming back with your notes–and thanks for the compliment. I’ve been testing out how this could be most beneficial to people: what do they really need help with? Design? Technical tweaks? Understanding of the basics of WordPress? Of Canvas?

          • Meg December 6, 2013 at 1:20 am #

            Hi Bradley … I think I just included something odd when I copy and pasted the code … when I typed it all out myself it worked just fine! Probably a better way to learn too 😉

            I really, really appreciate the technical tips – I know just enough to get into trouble when it comes to customising WordPress themes – and I get a bit lost sometimes finding where everything is in Canvas to be able to make the adjustments I need.

  4. Ramon December 9, 2013 at 4:03 pm #

    Hi Bradley

    Thank you very much for the post
    I have the same problem as Paul and Meg. when I add the code to the functions.php & css files, I cannot see the search form. I wonder if you know what helped them solve this? Thank you again!

    • Bradley Charbonneau December 20, 2013 at 1:12 pm #

      Hmm, maybe you’re all using a later version of Canvas than I was. I’ll have to give this a try with the latest theme and see if it works.

      • Meg December 21, 2013 at 1:34 am #

        For me – the problem was that I made a mistake in the functions php file … once I fixed my typos it all worked like t charm!

        • Dave January 5, 2014 at 11:29 am #

          I am not seeing this code work in functions.php on canvas version: CANVAS 5.5.7 . Anyway to fix this search box, I believe it may have worked with an older version.

          • Meg March 19, 2014 at 9:02 pm #

            Hi Dave

            Actually it works fine in the latest version of Canvas. The problem I had was that I made a typo in the functions.php file … once I fixed that it all worked just fine.

            Cheers
            Meg

Trackbacks/Pingbacks

  1. Write Every Day Challenge - August 20, 2013

    […] Add a search box in the top navigation of Canvas (Aug 20) […]

  2. WOO Canvas Header Widget - August 22, 2013

    […] are some other options for getting your buttons and other data into the menu bars, for example Add a search box in the top navigation of Canvas as well as Add a Search Box in the Primary Navigation of Canvas. You can also now more easily get […]

  3. Add a Search Box in the Primary Navigation of Canvas - September 16, 2013

    […] like a video on how to do that, here’s one from a previous lesson doing a very similar task: Add a search box in the top navigation of Canvas. Thanks for the code from a helpful WOO blog post: How to Create a Unique WordPress Website: 15 […]

  4. works | - January 5, 2014

    […] habe schon die Lösung gefunden, wie sich da anscheinend leicht eine search-box einfügen lässt: https://wpu.me/search-box-top-nav-canvas/ __ was die Entfernung der nervigen dropdown-pfeile im Menü angeht wird auch eine Lösung […]

  5. How do you find information on a website? - June 20, 2014

    […] you’d like your search button in the top navigation of your WOO Canvas, it’s just a bit of […]

Leave a Reply