<div class="topbar">
<div class="container">
<div class="topbar__inner">
<div class="topbar__logo">
<img class="logo" src="../../dist/images/logo.svg">
</div>
<div class="topbar__navigation">
<div class="topbar__navigation-flex">
<div class="topbar__navigation-secondary">
More at <a href="https://github.com/Novicell/novicell-pattern-library" title="github.com/Novicell/novicell-pattern-library" target="" class="link " property="url">github.com/Novicell/novicell-pattern-library</a>
</div>
<div class="topbar__navigation-primary">
<nav class="nav-main" role="navigation" vocab="http://schema.org/" typeof="SiteNavigationElement">
<ul class="nav-main-list">
<li class="nav-main-list__item ">
<a href="#" title="Home" target="" class="link " property="url">Home</a>
</li>
<li class="nav-main-list__item nav-main-list__item--active">
<a href="#" title="Get started" target="" class="link true " property="url">Get started</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
<li class="nav-main-list__item ">
<a href="#" title="About" target="" class="link " property="url">About</a>
</li>
</ul>
</nav>
<div class="topbar__navigation-search">
<input class="input " type="search" name="search-input" id="search-id" placeholder="Search" />
</div>
</div>
</div>
</div>
<div class="nav-main-mobile">
<button class="mobile-navigation-button hamburger hamburger--squeeze" id="js-mobile-navigation-button" type="button">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
<span class="hamburger-label js-hamburger-label" data-menu-text="Menu" data-close-text="Close">Menu</span>
</button>
</div>
</div>
</div>
</div>
<div class="topbar">
<div class="container">
<div class="topbar__inner">
<div class="topbar__logo">
{{ render '@logo' }}
</div>
<div class="topbar__navigation">
<div class="topbar__navigation-flex">
<div class="topbar__navigation-secondary">
More at {{ render '@link' githubLink }}
</div>
<div class="topbar__navigation-primary">
{{ render '@nav-main-list-priority' navMainList }}
<div class="topbar__navigation-search">
{{ render '@input--search' search }}
</div>
</div>
</div>
</div>
{{ render '@nav-trigger' }}
</div>
</div>
</div>
{
"githubLink": {
"url": "https://github.com/Novicell/novicell-pattern-library",
"text": "github.com/Novicell/novicell-pattern-library",
"target": null,
"title": "github.com/Novicell/novicell-pattern-library"
},
"navMainList": {
"list": [
{
"url": "#",
"text": "Home",
"title": "Home"
},
{
"active": true,
"url": "#",
"text": "Get started",
"title": "Get started"
},
{
"url": "#",
"text": "About",
"title": "About"
},
{
"url": "#",
"text": "About",
"title": "About"
},
{
"url": "#",
"text": "About",
"title": "About"
},
{
"url": "#",
"text": "About",
"title": "About"
},
{
"url": "#",
"text": "About",
"title": "About"
},
{
"url": "#",
"text": "About",
"title": "About"
}
]
},
"search": {
"type": "search",
"name": "search-input",
"id": "search-id",
"placeholder": "Search"
}
}
/*
* Module: Topbar
*/
:root {
--topbar-background-color: var(--color-white);
--topbar-border-color: var(--color-secondary);
--topbar-border-opacity: 25%;
--topbar-site-width: var(--site-width);
}
.topbar {
background-color: var(--topbar-background-color);
&__inner {
display: flex;
@media (--viewport-sm-min) {
align-items: center;
}
}
&__logo {
height: 85px;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
@media (--viewport-sm-min) {
flex-basis: 30%;
height: 100%;
padding-top: 20px;
padding-bottom: 20px;
margin-left: auto;
}
}
&__navigation {
padding-bottom: 20px;
width: 100%;
padding-left: 15px;
padding-right: 15px;
@media (--viewport-sm-min) {
border-right: 1px solid color-mod(var(--topbar-border-color, white) alpha(var(--topbar-border-opacity, 25%)));
flex-basis: 70%;
max-width: 70%;
padding-left: 0;
padding-right: 0;
padding-top: 20px;
}
}
&__navigation-flex {
justify-content: flex-end;
display: flex;
flex-direction: column-reverse;
@media (--viewport-sm-min) {
display: block;
}
}
&__navigation-primary {
align-items: center;
display: flex;
flex-direction: column;
@media (--viewport-sm-min) {
padding-right: 20px;
flex-direction: row;
padding-top: 20px;
}
}
&__navigation-secondary {
border-top: 1px solid color-mod(var(--topbar-border-color) alpha(var(--topbar-border-opacity)));
color: currentColor;
padding-top: 20px;
padding-bottom: 20px;
text-align: right;
@media (--viewport-sm-min) {
border-top: none;
border-bottom: 1px solid color-mod(var(--topbar-border-color) alpha(var(--topbar-border-opacity)));
padding-right: 20px;
}
}
&__navigation-search {
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
@media (--viewport-sm-min) {
margin-left: auto;
width: 300px;
}
}
}
@media (--viewport-ms-max) {
.topbar__navigation {
background-color: var(--color-white);
position: fixed;
width: 100%;
right: 0;
left: 0;
top: 85px;
bottom: 0;
z-index: 80;
height: 100vh;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s var(--easeInOutQuart);
overflow-y: auto;
padding-bottom: 30px;
}
}
For regular navigation, switch to nav-main-list, instead of nav-main-list-priority. They both have the same CSS and HTML, except for nav-main-list-priority having some additional styling.