dynegara so sorry for the late reply. I checked out the codes, if I change something here, lots of things will break, so what I am going to do is give you a temp solution and later do a perm solution with a future update.
the Hierachical Nav design looks a bit off when going down more than 2 levels so I am going to only indent this using the padding loop.
To make this change, open _nav.scss
go to line #354 and add:
li { padding-left: 1rem}
The structure should look similar to here:
// Sub nav level 2
> ul {
li {
&.active {
> a {
@include text-contrast( rgba(lighten(darken($nav-base-color, 11%), 5%), (20/100)) )
}
}
a {
color: darken($nav-link-color, 7%);
padding: $nav-padding-y $nav-padding-x $nav-padding-y ($nav-padding-x + $nav-icon-width + $nav-icon-margin-right + 0.75rem);
.dl-ref {
margin-left: 0;
margin-right: $nav-icon-margin-right / 1.2;
}
>[class*='fa-'],
>.#{$cust-icon-prefix} {
margin-left: 0;
margin-right: $nav-icon-margin-right / 1.2;
}
&:hover {
@include text-contrast( rgba(lighten(darken($nav-base-color, 11%), 5%), (45/100)) )
}
> .badge {
color: $nav-badge-color;
background-color: $nav-badge-bg-color;
border: 1px solid darken($color-fusion, 0%);
}
}
li {
padding-left: 1rem
}
}
}