.credential_logged_in { position: fixed; } .credential_logged_in.top_left, .credential_logged_in.bottom_left { left: 0; } .credential_logged_in.top_left, .credential_logged_in.top_right { top: 0; } .credential_logged_in.top_right, .credential_logged_in.bottom_right { right: 0; } .credential_logged_in.bottom_left, .credential_logged_in.bottom_right { bottom: 0; } .credential_bar { position: relative; background: #777; color: white; padding: 5px 10px; font-size: 10px; line-height: 15px; } .credential_bar::before { font-family: FontAwesome; content: "\f023"; display: inline-block; margin-right: 0.5em; } .credential_bar:hover { cursor: pointer; } .top_left .credential_bar { border-bottom-right-radius: 4px; } .top_right .credential_bar { border-bottom-left-radius: 4px; } .bottom_left .credential_bar { border-top-right-radius: 4px; } .bottom_right .credential_bar { border-top-left-radius: 4px; } .open .credential_bar { border-radius: 0; } .credential_menu_toggle::after { margin-left: 0.5em; font-family: FontAwesome; } .top_left .credential_menu_toggle::after, .top_right .credential_menu_toggle::after, .bottom_left.open .credential_menu_toggle::after, .bottom_right.open .credential_menu_toggle::after { content: "\f0d7"; } .top_left.open .credential_menu_toggle::after, .top_right.open .credential_menu_toggle::after, .bottom_left .credential_menu_toggle::after, .bottom_right .credential_menu_toggle::after { content: "\f0d8"; } .credential_menu { display: none; position: absolute; list-style: none; border: 1px solid #777; padding: 10px 20px; background: white; margin: 0; } .open .credential_menu { display: block; } .top_left .credential_menu, .top_right .credential_menu { top: 25px; } .bottom_left .credential_menu, .bottom_right .credential_menu { bottom: 25px; } .top_left .credential_menu, .bottom_left .credential_menu { left: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .top_right .credential_menu, .bottom_right .credential_menu { right: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }