Add navbar-var-length config parameter (#1011)

* add navbar-var-length config option

* fix endif -> endunless

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 

_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"
 

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) {