More limits to Lead nav

CHANGELOG.md

@@ -4,9 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.17](https://github.com/eea/volto-forests-theme/compare/0.1.16...0.1.17)
+
+- More limits to Lead nav [`0b5a328`](https://github.com/eea/volto-forests-theme/commit/0b5a328ac6b00ff60f2d4fa894d5cf131f5ce6a2)
+
 #### [0.1.16](https://github.com/eea/volto-forests-theme/compare/0.1.15...0.1.16)
 
-- Fill page width & lower limits on Lead Navigation [`efc8d99`](https://github.com/eea/volto-forests-theme/commit/efc8d99242ae1bc26a5f6a3318c7c77de46b1fcd)
+> 22 November 2021
+
+- Fill page width & lower limits on Lead Navigation [`#20`](https://github.com/eea/volto-forests-theme/pull/20)
 
 #### [0.1.15](https://github.com/eea/volto-forests-theme/compare/0.1.14...0.1.15)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/theme/Header/HeaderNavigation.jsx

@@ -137,7 +137,13 @@ const HeaderNavigation = ({ items, pageWidth }) => {
           {displayedItems.length > 0 &&
             displayedItems.map((item, index) => (
               <Link
-                style={{ width: `${100 / itemsPerPage}%` }}
+                style={{
+                  width: `${
+                    items.length < itemsPerPage
+                      ? 100 / items.length
+                      : 100 / itemsPerPage
+                  }%`,
+                }}
                 className={`lead-navigation-item ${
                   activeItem.title === item.title ? 'active-lead-nav' : ''
                 }`}