diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.jsx b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
index 8c16ea78c..1d3e8c811 100644
--- a/client/homebrew/brewRenderer/headerNav/headerNav.jsx
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.jsx
@@ -64,8 +64,8 @@ const HeaderNavItem = ({ link, text, depth, className })=>{
 	};
 
 	return <li>
-		<a href={`#${link}`} target='_self' className={className}>
-			<span style={{ display: 'inline-block', width: `${depth * 0.5}em` }}></span>{trimString(text, depth)}
+		<a href={`#${link}`} target='_self' className={`depth-${depth} ${className ?? ''}`}>
+			{trimString(text, depth)}
 		</a>
 	</li>;
 };
diff --git a/client/homebrew/brewRenderer/headerNav/headerNav.less b/client/homebrew/brewRenderer/headerNav/headerNav.less
index 3224e1d61..1e3898e7d 100644
--- a/client/homebrew/brewRenderer/headerNav/headerNav.less
+++ b/client/homebrew/brewRenderer/headerNav/headerNav.less
@@ -20,6 +20,8 @@
 	li {
 		list-style-type: none;
 		a {
+			display: inline-block;
+			width: 100%;
 			font-family: 'Open Sans';
 			font-size: 12px;
 			padding: 2px;
@@ -32,6 +34,14 @@
 			&.pageLink {
 				font-weight: 900;
 			}
+
+			@depths: 1,2,3,4,5,6,7;
+
+			each(@depths, {
+				&.depth-@{value} {
+					padding-left: ((@value - 1) * 0.5em);
+				}
+			});
 		}
 	}
 }
\ No newline at end of file