From 685cf73c9d70c46675e3b1864ccd154d0adb9220 Mon Sep 17 00:00:00 2001
From: Dean Attali <dean@attalitech.com>
Date: Wed, 20 Jul 2022 22:53:17 -0400
Subject: [PATCH] Add `navbar-var-length` config parameter (#1011)

* add navbar-var-length config option

* fix endif -> endunless
---
 CHANGELOG.md                   |  2 +-
 _config.yml                    |  5 +++++
 assets/css/beautifuljekyll.css | 11 ++++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a03e80008a7..61436a3deb5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## Unreleased version
 
-- Fixed the navigation menu so that it would be the same length as the longest sub-menu (#765) 
+- Added `navbar-var-length` config setting that allows the navigation menu to be the same length as the longest sub-menu, so that long words in the submenu are not cut off (#765) 
 - Added `post_search` config setting that creates a Search button in the navbar (older websites need to set `post_search: true` to enable this feature) (#770)
 - Added `edit_page_button` config setting that adds a "Edit page" button to the footer (to edit the current page on GitHub) (#1004)
 - BREAKING CHANGE: More control over RSS feed sharing: previously, an RSS feed was *always* generated, and if the config setting `rss-description` was set then there was an RSS icon in the footer. Now, an RSS feed is only generated when the config setting `rss-description` exists, and an RSS footer icon is only shown if `rss: true` is set in the `social-network-links` config settings 
diff --git a/_config.yml b/_config.yml
index 8bef542d360b..40e0bc8a04a5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -111,6 +111,11 @@ post_search: true
 # Add a button in the footer to edit the current page. Only works if your website is hosted on GitHub
 edit_page_button: true
 
+# Allow sub-menu items (second-level navigation menu items) to be longer than the top-level menu
+# If this setting is off, then long sub-menu words might get cut off
+# See https://github.com/daattali/beautiful-jekyll/issues/765 to understand the issue this setting can solve
+navbar-var-length: false
+
 # The keywords to associate with your website, for SEO purposes
 #keywords: "my,list,of,keywords"
 
diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
index a72135eeeb9a..d30caa9e7862 100644
--- a/assets/css/beautifuljekyll.css
+++ b/assets/css/beautifuljekyll.css
@@ -250,8 +250,14 @@ img {
   margin-top: 0;
   font-size: 1em;
   border: 0;
-  min-width: 100%;
   padding: 0;
+  {% if site.navbar-var-length %}
+  min-width: 100%;
+  {% else %}
+  min-width: 0;
+  width: 100%;
+  word-break: break-word;
+  {% endif %}
 }
 
 .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
@@ -260,6 +266,9 @@ img {
   text-decoration: none !important;
   font-weight: normal;
   color: {{ site.navbar-text-col | default: "#404040" }};
+  {% unless site.navbar-var-length %}
+  white-space: normal;
+  {% endunless %}
 }
 
 @media (min-width: 1200px) {