<nav class="main-nav">
<ul>
<li><a href="#">Nav link</a></li>
</ul>
</nav>
<nav class="main-nav">
<ul><li><a href="{{link.href}}">{{link.text}}</a></li></ul>
</nav>
{
"link": {
"href": "#",
"text": "Nav link"
}
}
a{
color: $c-link-color;
color: var(--color-theme, $c-link-color);
@include transition;
&:hover,
&:active,
&:focus {
color: $c-link-hover-color;
color: var(--color-theme-hover, $c-link-hover-color);
text-decoration-color: transparent;
}
&:focus {
outline-color: $c-brand-gold;
}
}
nav.main-nav > ul > li > a {
position: relative;
display: block;
padding: .5rem;
margin: 0;
color: $c-font-color;
text-decoration: none;
font-size: rem(18px);
@include mediaWQuery($media-query-l) {
&::before {
content: '';
@include absPosition(false, false, 5px, .5rem);
width: 0;
max-width: 50%;
height: 2px;
opacity: 0;
border-radius: $border-radius-xs;
background: $c-link-border-color;
@include transition;
}
}
&:hover,
&:active,
&:focus {
&::before {
opacity: 1;
width: 40px;
}
}
}
nav.main-nav > ul > li.current-menu-item > a::before,
nav.main-nav > ul > li.current-menu-parent > a::before {
opacity: 1;
width: 40px;
}
nav.main-nav > ul ul a{
font-size: rem(18px);
}
There are no notes for this item.