diff --git a/src/components/nav-bar/nav-bar.scss b/src/components/nav-bar/nav-bar.scss
index afc295fc..80d64e0c 100644
--- a/src/components/nav-bar/nav-bar.scss
+++ b/src/components/nav-bar/nav-bar.scss
@@ -32,6 +32,10 @@ $nav-break-height-sm: 746px;
         margin: 20px 0;
         padding-right: 3px;
         font-size: 34px;
+        font-family: inherit;
+        line-height: 1.5;
+        display: block;
+        width: 100%;
         color: $white-color;
         text-align: center;
         cursor: pointer;
diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
index a3e32d45..d4d4b858 100644
--- a/src/components/nav-bar/nav-bar.tsx
+++ b/src/components/nav-bar/nav-bar.tsx
@@ -35,10 +35,10 @@ export const NavBar: React.FunctionComponent<NavBarProps> = (props: NavBarProps,
                 <div className='nav-bar__version'>{props.version && props.version()}</div>
                 {(props.items || []).map((item) => (
                     <Tooltip content={item.title} placement='right' arrow={true} key={item.path + item.title}>
-                        <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
+                        <button className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
                             onClick={() => context.router.history.push(item.path)}>
                             <i className={item.iconClassName}/>
-                        </div>
+                        </button>
                     </Tooltip>
                 ))}
             </div>