diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -98,9 +98,16 @@ nav.navbar {
   min-height: 44px;
   background-color: #577632;
 }
-nav.navbar #logo > .navbar-brand > img {
-  margin-top: -9px;
-  margin-right: 5px;
+/* logo */
+.navbar-brand .branding:before {
+  content: "";
+  display: inline-block;
+  margin-right: .2em;
+  background-image: url("../images/kallithea-logo.svg");
+  width: 140px;
+  height: 30px;
+  margin-bottom: -4px;
+  margin-top: -12px;
 }
 /* every direct child of a panel, that is not .panel-heading, should auto
  * overflow to prevent overflowing of elements like text boxes and tables */
diff --git a/kallithea/public/less/style.less b/kallithea/public/less/style.less
--- a/kallithea/public/less/style.less
+++ b/kallithea/public/less/style.less
@@ -106,9 +106,19 @@ nav.navbar {
   min-height: 44px;
   background-color: #577632;
 }
-nav.navbar #logo > .navbar-brand > img {
-  margin-top: -9px;
-  margin-right: 5px;
+
+/* logo */
+.navbar-brand .branding {
+  &:before {
+    content: "";
+    display: inline-block;
+    margin-right: .2em;
+    background-image: url("../images/kallithea-logo.svg");
+    width: 140px;
+    height: 30px;
+    margin-bottom: -4px;
+    margin-top: -12px;
+  }
 }
 
 /* every direct child of a panel, that is not .panel-heading, should auto
diff --git a/kallithea/templates/base/root.html b/kallithea/templates/base/root.html
--- a/kallithea/templates/base/root.html
+++ b/kallithea/templates/base/root.html
@@ -116,10 +116,7 @@
       <nav class="navbar navbar-inverse mainmenu">
           <div class="navbar-header" id="logo">
             <a class="navbar-brand" href="${h.url('home')}">
-                <img class="pull-left" src="${h.url('/images/kallithea-logo.svg')}" alt="Kallithea"/>
-                  %if c.site_name:
-                    <span class="branding">${c.site_name}</span>
-                  %endif
+              <span class="branding">${c.site_name}</span>
             </a>
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
               <span class="sr-only">Toggle navigation</span>