/* navigation */ /* TODO mobile: full width / height (position absolute needed) back instead of close folded out: searchbar full width? search icon (always visible) TODO general real priorities (prio-1, prio-2) that hide/show on breakpoints? (for example: you want to show contact always) could also be solved with nested lists (where children have less priority) */ body > nav { background: $brand-color; z-index: 2 } nav { font-size: 1rem; letter-spacing: .44px; line-height: 3rem; /* transition: background-color 1s; for desktop <-> mobile transition */ /* if we want soft clip: white-space: nowrap */ z-index: 1; > ul { list-style: none; overflow: hidden; /* priority menu, hide items when they do not fit */ margin: 0; padding-left: 0 } ul > li { display: inline-block; padding: 0 .5rem; margin: 0; > a { display: block; padding: 0 .5rem; } } a { color: $inverted-text-color; text-decoration: none; transition: background-color .5s } .active a, a:hover, a:focus { background: $primary-color; text-decoration: none; transition: background-color .5s } } /* TODO quick hack for kiki sub menus, needs fixing */ nav ul ul { background: $secondary-color; display: none; left: 0; margin: 0; position: absolute; top: 100% } ul li:hover ul, ul li:focus ul { display: block; } /* end quick hack for sub menus */ .prevnext { overflow: hidden; padding: 2rem 1rem 1rem 1rem } a[rel="prev"] { float: left } a[rel="next"] { float: right; text-align: right } .related { border-top: 1px solid lightgray } .breadcrumbs { font-size: smaller; margin: 1rem 0; padding-left: 0; li+li:before { color: #aaa; content: " › "; font-size: 1rem } } section .breadcrumbs li:last-child a { color: gray }