diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33579fe1973a..d87419b841ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
## Unreleased version
+- Added search to the navbar (can be turned off in the config file) (#770)
- Slightly reworked margins and position for avatar image to resolve an alignment issue on Safari.
- Changed the width at which the navbar collapses to a higher threshold because most modern non-mobile browsers are >1000px
- Fixed bug where navbar secondary level dropdown items didn't inherit the same colour as the primary navbar links
diff --git a/README.md b/README.md
index 8c79583ba8ae..28f05b47c29c 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
# Features
-Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.
+__Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the latest features.__
- **SIMPLE**: The primary goal of Beautiful Jekyll is to allow literally *anyone* to create a website in a few minutes.
- **Modern**: Uses the latest best practices and technologies to achieve nearly perfect scores on Google Chrome's Audit.
@@ -36,8 +36,9 @@ Check out [*What's New?*](https://beautifuljekyll.com/updates/) to see the lates
- **Battle-tested**: By using Beautiful Jekyll, you'll be joining 50,000+ users enjoying this theme since 2015.
- **SEO and social media support**: Customize how your site looks on Google and when shared on social media.
- **Comments support**: Add comments to any page using either [Disqus](https://disqus.com/), [Facebook comments](https://developers.facebook.com/docs/plugins/comments), [Utterances](https://utteranc.es/), or [Staticman](https://staticman.net).
-- **Tags**: Any blog post can be tagged with keywords, and an index page showing all the tags is automatically generated.
+- **Tags**: Any blog post can be tagged with keywords, and an index page is automatically generated.
- **Analytics**: Easily integrate Google Analytics, or other analytics platforms, to track visits to your website.
+- **Search**: Let users easily find any page using a Search button in the navigation bar.
- **Photos support**: Any page can have a full-width cover photo and thumbnail.
- **RSS**: An RSS feed is automatically created, so you can even host a podcast easily with Beautiful Jekyll.
diff --git a/_config.yml b/_config.yml
index 8bc1f89d7c74..bf1783da1928 100644
--- a/_config.yml
+++ b/_config.yml
@@ -89,6 +89,9 @@ feed_show_excerpt: true
# Whether or not to show a list of tags below each post preview in the feed page
feed_show_tags: true
+# Add a search button to the navbar
+post_search: true
+
# The keywords to associate with your website, for SEO purposes
#keywords: "my,list,of,keywords"
diff --git a/_includes/nav.html b/_includes/nav.html
index ae8294ee8871..a1adfbc254c1 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -30,6 +30,14 @@
{%- endif -%}
{%- endfor -%}
+ {% if site.post_search %}
+
+
+
+ Search
+
+
+ {%- endif -%}
@@ -50,3 +58,5 @@
{% endif %}
+
+{% include search.html %}
diff --git a/_includes/search.html b/_includes/search.html
new file mode 100644
index 000000000000..7924fd08b213
--- /dev/null
+++ b/_includes/search.html
@@ -0,0 +1,39 @@
+{% if site.post_search %}
+
+
+
+{% endif %}
diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
index f53097ef5db8..719dab377c97 100644
--- a/assets/css/beautifuljekyll.css
+++ b/assets/css/beautifuljekyll.css
@@ -993,3 +993,98 @@ pre {
display: block;
margin: 0 auto;
}
+
+/* Search bar */
+#beautifuljekyll-search-overlay {
+ display: none;
+ z-index: 999999;
+ position: fixed;
+ background: rgba(0,0,0,0.9);
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ text-align: center;
+ padding: 1rem;
+}
+#nav-search-exit {
+ position: absolute;
+ top: 1.5rem;
+ cursor: pointer;
+ right: 25%;
+ margin-right: 2rem;
+ color: #555;
+ font-size: 2rem;
+ line-height: 2rem;
+ font-weight: bold;
+}
+#nav-search-exit:hover {
+ color: #000;
+}
+#nav-search-input {
+ text-align: center;
+ background: #e7edee;
+ margin: auto;
+ display: block;
+ font-size: 2rem;
+ width: 50%;
+ transition: width 300ms ease;
+ color: #222;
+ border-radius: 5rem;
+ outline: none;
+ border: none;
+ padding: 0 3rem;
+}
+@media (max-width: 1199px) {
+ #nav-search-input {
+ width: 75%;
+ }
+ #nav-search-exit {
+ right: 12.5%;
+ }
+}
+@media (max-width: 767px) {
+ #nav-search-input {
+ width: 100%;
+ }
+ #nav-search-exit {
+ right: 0;
+ }
+}
+#nav-search-input:focus {
+ background: #f3f8fe;
+ box-shadow: 0px 0.15rem 1rem #e7f4ff;
+ outline: none;
+}
+
+#nav-search-input::placeholder {
+ color: #777;
+}
+
+#search-results-container {
+ list-style: none;
+ padding-left: unset;
+ margin-top: 1.5rem;
+ color: #fff;
+ font-size: 1.5rem;
+}
+#search-results-container a,
+#search-results-container a:hover {
+ color: #fff;
+}
+
+#nav-search-icon {
+ display: inline-block;
+}
+#nav-search-text {
+ display: none;
+}
+
+@media (max-width: 1199px) {
+ #nav-search-icon {
+ display: none;
+ }
+ #nav-search-text {
+ display: inline-block;
+ }
+}
diff --git a/assets/js/beautifuljekyll.js b/assets/js/beautifuljekyll.js
index bcddc6798998..48a3adadb995 100644
--- a/assets/js/beautifuljekyll.js
+++ b/assets/js/beautifuljekyll.js
@@ -27,6 +27,8 @@ var BeautifulJekyllJS = {
// show the big header image
BeautifulJekyllJS.initImgs();
+
+ BeautifulJekyllJS.initSearch();
},
initNavbar : function() {
@@ -108,6 +110,25 @@ var BeautifulJekyllJS = {
} else {
$(".img-desc").hide();
}
+ },
+
+ initSearch : function() {
+ if (!document.getElementById("beautifuljekyll-search-overlay")) {
+ return;
+ }
+
+ $("#nav-search-link").click(function(e) {
+ e.preventDefault();
+ $("#beautifuljekyll-search-overlay").show();
+ $("#nav-search-input").focus().select();
+ });
+ $("#nav-search-exit").click(function(e) {
+ e.preventDefault();
+ $("#beautifuljekyll-search-overlay").hide();
+ });
+ $(document).on('keyup', function(e) {
+ if (e.key == "Escape") $("#beautifuljekyll-search-overlay").hide();
+ });
}
};