update

src/arquivos/sass/partials/_menu.scss

@@ -12,6 +12,42 @@
 	}
 
 	.main-menu {
-		display: none;
+		&__departments {
+			display: flex;
+			align-items: center;
+		}
+
+		&__department {
+			margin-right: 40px;
+
+			@include mq(lg, min) {
+				&:hover {
+					.main-menu__department-link {
+						font-weight: 600;
+						color: $blue-500;
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+
+		&__department-link {
+			font-size: 12px;
+			line-height: 15px;
+			color: $white-500;
+
+			@include mq(lg, min) {
+				// Técnica usada para quando aplicar bold no hover o elemento não mexer toda a tela.
+			&::after {
+				display: block;
+				// O conteúdo vai ser o atributo title.
+				content: attr(title);
+				height: 0;
+				overflow: hidden;
+				font-weight: bold;
+				visibility: hidden;
+				}
+			}
+		}
 	}
 }

src/controles-customizados/menuPrincipal.html

@@ -0,0 +1,15 @@
+<nav class="main-menu">
+	<ul class="main-menu__departments">
+		<li class="main-menu__department">
+			<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
+		</li>
+
+		<li class="main-menu__department">
+			<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
+		</li>
+
+		<li class="main-menu__department">
+			<a href="#" class="main-menu__department-link" title="LOREM IPSUM">LOREM IPSUM</a>
+		</li>
+	</ul>
+</nav>

src/template-pagina/sub-templates/luizfelipe-header.html

@@ -7,13 +7,8 @@
 					<i class="sprite sprite-menu-icon"></i>
 				</button>
 
-				<nav class="main-menu">
-					<ul>
-						<li><a href="/">LOREM IPSUM</a></li>
-						<li><a href="/">LOREM IPSUM</a></li>
-						<li><a href="/">LOREM IPSUM</a></li>
-					</ul>
-				</nav>
+				<!-- Está chamando o arquivo HTML presente em controles customizados. -->
+				<vtex.cmc:menuPrincipal/>
 			</div>
 
 			<a href="/">