diff --git a/scss/main.scss b/scss/main.scss
index c438a906e17ffab32f1ce85550253e1b7ea74847..893e66c6a16cf2ed3b6b5f1ebcb2e3674efcc001 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -13,6 +13,8 @@ @import "bootstrap/scss/_maps.scss";
 @import "bootstrap/scss/_mixins.scss";
 @import "bootstrap/scss/_utilities.scss";
 
+$navbar-nav-link-padding-x: $spacer;
+
 // added component
 @import "bootstrap/scss/_root.scss";
 @import "bootstrap/scss/_containers.scss";
@@ -123,6 +125,14 @@
 pre {
     display: grid;
     overflow-x: auto;
+}
+
+#name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-left: $spacer;
+  max-width: calc(100% - calc(2 * #{$spacer}));
 }
 
 #about {
diff --git a/templates/navbar.qtpl b/templates/navbar.qtpl
index 56ce27651cf8ebdbd0f91da733e9abedc3a67d8d..68b1fd8a530198b17254ae7629bca5c82f1fb683 100644
--- a/templates/navbar.qtpl
+++ b/templates/navbar.qtpl
@@ -40,7 +40,7 @@ {% endfunc %}
 
 {% func GitItemNav (name, ref string, s GitSelection) %}
 <div class="row">
-    <h3>{%s name %} {% if ref != "" && (s == Log || s == Tree)  %}@ {%s ref %}{% endif %}</h3>
+    <h3 id="name">{%s name %} {% if ref != "" && (s == Log || s == Tree)  %}@ {%s ref %}{% endif %}</h3>
 </div>
 <div class="row">
   <ul class="nav">
diff --git a/templates/navbar.qtpl.go b/templates/navbar.qtpl.go
index 6411b53ee169270e81992f0d426f688fa2033858..806df94d8b133cc246045e0bce8932bd569aefe5 100644
--- a/templates/navbar.qtpl.go
+++ b/templates/navbar.qtpl.go
@@ -134,7 +134,7 @@ func StreamGitItemNav(qw422016 *qt422016.Writer, name, ref string, s GitSelection) {
 //line navbar.qtpl:41
 	qw422016.N().S(`
 <div class="row">
-    <h3>`)
+    <h3 id="name">`)
 //line navbar.qtpl:43
 	qw422016.E().S(name)
 //line navbar.qtpl:43