.SinonJZH-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; border-color: #e7e7e7; background-color: rgba(255, 255, 255, 0.4); box-shadow: 0 1px 11px 2px rgba(42, 42, 42, 0.1); border-top: 4px solid #00ffff; border-bottom: 1px solid #e8e8e8; margin-bottom: 0; margin-top: 0; position: sticky; top: 5px; } .SinonJZH-nav .SinonJZH-nav-item { display: block; margin-bottom: 5px; margin-right: 1rem; } .SinonJZH-nav .SinonJZH-nav-item p { margin: 0; position: relative; } .SinonJZH-nav .SinonJZH-nav-item p:first-child { display: flex; align-items: center; } .SinonJZH-nav .SinonJZH-nav-item a { color: #737373; text-decoration: none; font-size: larger; font-weight: 500; } .SinonJZH-nav .SinonJZH-nav-item a:nth-child(2) { color: black; } .SinonJZH-nav .SinonJZH-nav-item .selflink { color: black; font-weight: bold; } .SinonJZH-nav .SinonJZH-nav-item .selflink ~ .SinonJZH-nav-select { position: absolute; top: 38px; left: 0; height: 5px; width: 100%; background: #F57D38; } .SinonJZH-nav .SinonJZH-nav-item:first-child .selflink ~ .SinonJZH-nav-select { top: 51px; } .SinonJZH-nav .SinonJZH-nav-item a:hover { color: black; } .SinonJZH-nav .SinonJZH-nav-status { flex: 1; display: flex; align-items: center; justify-content: end; } .SinonJZH-nav .SinonJZH-nav-status > p > span { margin-bottom: 5px; font-size: larger; } .SinonJZH-userbox { display: flex; flex-wrap: wrap; } .SinonJZH-userbox > div { float: none !important; } .SinonJZH-userbox > hr { width: 100%; margin: 5px 0 5px 0; } @media screen and (max-width: 600px) { .SinonJZH-nav { position: static; } .SinonJZH-nav .SinonJZH-nav-item, .SinonJZH-nav .SinonJZH-nav-status { margin: initial; width: 100%; } .SinonJZH-nav .SinonJZH-nav-item .SinonJZH-nav-select { display: none; } .SinonJZH-nav .SinonJZH-nav-item p:first-child, .SinonJZH-nav .SinonJZH-nav-status { justify-content: center; } }