Advertisement
Guest User

NavBar CSS

a guest
Jul 20th, 2019
124
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.39 KB | None | 0 0
  1. /*
  2. NavBar CSS by Zeroxe
  3. */
  4.  
  5. .vt_header .flex {
  6. display: -webkit-flex;
  7. display: -moz-flex;
  8. display: -ms-flex;
  9. display: flex;
  10. }
  11.  
  12. .vt_header .flex.space-between { justify-content: space-between; }
  13. .vt_header .flex.vert-center { align-items: center; }
  14.  
  15. .navbar {
  16. height: 70px;
  17. position: fixed;
  18. left: 0;
  19. right: 0;
  20. top: 0;
  21. z-index: 9999;
  22. background: #252c3e;
  23. box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px;
  24. }
  25.  
  26. .navbar .logo h1 {
  27. font-family: 'Raleway', sans-serif;
  28. font-weight: 200;
  29. font-size: 2.2em;
  30. color: #fff;
  31. }
  32.  
  33. .navbar .inner {
  34. max-width: 1170px;
  35. margin: 0 auto;
  36. height: 100%;
  37. }
  38.  
  39.  
  40. .navbar .inner ul li {
  41. position: relative;
  42. display: block;
  43. }
  44.  
  45. .navbar .inner ul li>a {
  46. display: block;
  47. font-size: 16px;
  48. padding: 27px 17px 24px;
  49. transition: 160ms all ease-in-out;
  50. color: #8597c3;
  51. font-family: 'Raleway', sans-serif;
  52. border-bottom: 3px rgba(0, 0, 0, 0) solid;
  53. font-weight: 600;
  54. }
  55.  
  56. .navbar .inner ul li:hover>a, li:focus>a {
  57. text-decoration: none;
  58. cursor: pointer;
  59. background: #2196f3;
  60. color: #fff;
  61. border-bottom-color: #1986dc;
  62. padding: 26px 17px 25px;
  63. }
  64. a {
  65. text-decoration: none;
  66. transition: 120ms all ease-in-out;
  67. color: #2196f3;
  68. }
  69. a:hover, a:focus {
  70. text-decoration: none;
  71. color: #71a9ff;
  72. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement