Ghost Blog Platform how to add a Search button in the nav bar?
To add a search button to the navigation bar in the Ghost blogging platform, there are 2 ways:
Here is a simple method using integrations:
- Access your Ghost theme files: Log in to your Ghost admin panel and navigate to the settings > "integrations" section.
- Locate the "Add custom integrations" button by clicking it name the new custom integration as - Search
- Copy the content API key and navigate to the "Design" section, under "site-wide" paste the copied API key in "Search API key" section.
That's it and you're good it go, you can find the search button on the right side in nav bar section of your website.
Here is an another method, you'll need to modify the theme files:
- Access your Ghost theme files: Log in to your Ghost admin panel and navigate to the "Design" section. Click on the "Edit code" button to access your theme files.
- Locate the navigation bar: Look for the file that controls your navigation bar. Typically, this file is called
navigation.hbsorheader.hbs. It is usually found within thepartialsorlayoutsfolder of your theme. - Add the search button code: Within the navigation bar code, find the appropriate location where you want to add the search button. You can usually place it inside the
<ul>element that contains your navigation links. Add the following code snippet:
<li><a href="{{@site.url}}/search">Search</a></li>
This code will create a new list item (<li>) with a link (<a>) to the search page. Adjust the URL if your theme uses a different syntax for linking to pages.
- Save and update your theme: After adding the code, save the changes to the theme file. If necessary, publish the updated theme. You should now see the search button in your navigation bar.
Please note that the exact steps and file names may vary depending on the theme you're using. Make sure to refer to your theme's documentation or consult the theme developer if you encounter any issues or if the above instructions don't apply to your specific theme.
