Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Creating Search box in Main Menu

Solved by pamtbaau View solution

Started by Dan Naber 4 years ago · 8 replies · 1331 views
4 years ago

Hello. I am very new to GRAV and its inner workings. I've built a very basic site and have added the Simple Search plugin. I'd like to add a search box in the header/end of my main menu items. I can't for the life of me find any easy to follow guidance.

Please provide the exact code and where exactly to put it. Thanks very much in advance.

4 years ago

I did but I did not find the instructions clear enough.

"After installing the SimpleSearch plugin, you can add a simple searchbox to your site by including the provided twig template. Or copy it from the plugin to your theme and customize it as you please:"

Where exactly would I put this line of code to have a search box show up in my main menu?

{% include 'partials/simplesearch_searchbox.html.twig' %}

Thanks so much for responding!

4 years ago

It totally depends on a theme you use.

4 years ago Solution

@skq, What @Karmalakas meant to say is something like...

Updated
If I knew your theme's templates I might be able to tell, but since I don't know I'll give a sample using Quark:

  • Open file /user/themes/quark/templates/partials/base.html.twig, add a newline after line 53 and insert the following:

    TWIG
    {% include 'partials/simplesearch_searchbox.html.twig' %}
    
  • Open file /user/themes/quark/css/custom.css and add:

    CSS
    .dropmenu.animated {
    display: flex;
    }
    

    This is needed to inline the navbar and the searchbox.

  • Open de home page of the site and you should see something like:
    Untitled|690x301

  • When entering a search term and hitting <return>, the results will be shown on page https://yourdomain/search

Of course, this is just a rough example to get you going.

Please note: You need an inheriting theme for this. Because when Quark gets a new version, your changes will be lost. An inheriting theme (aka child theme) is your own and will not be updated.

👍 1
last edited 05/05/22 by pamtbaau
4 years ago

@pamtbaau:
replace line 15

I have not yet used this plugin, but as an aside you got me curious why this was necessary. I took a look and it seems you've simplified some horribly complex logic.

4 years ago

@pamtbaau thanks very much for responding. I do in fact have Quark as my theme. I tried your instructions. It sort of worked. In the attached screenshot you can see that a search box shows up at the bottom of each menu dropdown and a small nondescript box at the right end of the main menu items. I can type text in both boxes and get search results in mydomain/search

Screen Shot 2022-05-05 at 3.48.37 AM|690x225

4 years ago

@skq, Unfortunately, I can reproduce the issue.... It's because the searchbox was added to macros.html.twig which is repeated for every child page.

When creating the previous solution inside the macro I noticed that the searchbox's "route" wasn't working properly. The result url was constructed improperly. That's why the fix was required.

I've now placed the searchbox in /quark/templates/partials/base.html.twig. However, some css is now needed to inline the navbar and the searchbox.

I've update my previous reply which should now be simpler.

@hughbris, The simplified logic was needed because the searchbox seems to behave differently when placed inside a macro...

👍 1
4 years ago

@pamtbaau thanks very much! I will give it a try. Yes, I was wondering if I would need to create a new theme.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 198 2 months ago
Themes & Styling · by Ian, 2 months ago
3 94 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 455 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 48 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 128 3 months ago