Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Navbar */
- .navbar {
- display: flex;
- justify-content: space-between;
- position: fixed;
- width: 100%;
- top: 0;
- z-index: 3 !important ;
- color: #fff;
- background: rgba(20, 27, 46) !important ;
- height: 50px;
- }
- .navbar > h4 > span {
- transition-duration: 750ms;
- opacity: 0;
- }
- .navBar.with-title {
- background: rgba(20, 27, 46) !important ;
- }
- .navbar.with-title > h4 > span {
- opacity: 1;
- transition-duration: 750ms;
- }
- .navbar div:hover {
- color: white;
- cursor: pointer;
- }
- .writing span {
- color: #ff6361 !important;
- }
- /* Navbar1 */
- .navbar1 {
- position: fixed;
- top: -120px;
- width: 100%;
- z-index: 2;
- text-align: center;
- }
- .navbar1.show {
- animation-name: showNav1;
- animation-duration: 0.3s;
- top: 50px;
- background: rgba(20, 27, 46) !important ;
- }
- @keyframes showNav1 {
- from {
- top: -120px;
- }
- to {
- top: 50px;
- }
- }
- .navbar1 ul {
- display: flex;
- justify-content: space-between;
- margin: 0;
- width: 100%;
- padding: 0;
- }
- .navbar1 ul li {
- display: flex;
- flex-direction: column;
- list-style: none;
- align-items: center;
- padding-top: 5px;
- overflow-x: auto;
- width: 100%;
- justify-content: flex-end;
- align-items: center;
- cursor: pointer;
- }
- .navbar1 ul li a {
- color: #e1e1e1;
- text-decoration: none;
- display: flex;
- flex-direction: column;
- width: 75%;
- }
- .navbar1 ul li a span {
- color: #e1e1e1 !important;
- }
- .navbar1 ul li a:hover {
- color: #ff6361;
- }
- .navbar1 ul li a span {
- padding-top: 5px;
- padding-bottom: 5px;
- }
- .active {
- border-bottom: 4px solid #ff6361;
- /* border-radius-top: 3px; */
- border-bottom-right-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- /* Side Bar */
- .sideMenu {
- height: 100%;
- width: 300px;
- position: fixed;
- z-index: 5;
- top: 0;
- left: -500px;
- background: #111;
- display: flex;
- flex-direction: column;
- animation-duration: 0.3s;
- }
- .sideMenu.show {
- animation-name: showMenu;
- animation-duration: 0.3s;
- left: 0px;
- }
- @keyframes showMenu {
- from {
- left: -500px;
- }
- to {
- left: 0px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement