navbar.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. header nav {
  2. margin: -8px -15px;
  3. }
  4. .navbar-header {
  5. position: relative;
  6. }
  7. .navbar-brand {
  8. color: #fff;
  9. float: left;
  10. font-size: 18px;
  11. height: 56px;
  12. line-height: 20px;
  13. padding: 17px 15px;
  14. }
  15. .navbar-brand:hover {
  16. color: #fff;
  17. }
  18. .navbar-toggle {
  19. border-radius: 4px;
  20. border: 1px solid #fff;
  21. float: right;
  22. margin-bottom: 8px;
  23. margin-right: 15px;
  24. margin-top: 8px;
  25. padding: 4px 10px;
  26. }
  27. .navbar-nav {
  28. -ms-flex-direction: column;
  29. background-color: #205081;
  30. border-radius: 4px;
  31. border: 1px solid #fff;
  32. display: -ms-flexbox;
  33. display: flex;
  34. flex-direction: column;
  35. left: 15px;
  36. list-style: none;
  37. margin: 0;
  38. padding: 0;
  39. position: absolute;
  40. right: 15px;
  41. top: 47px;
  42. }
  43. .navbar-nav.closed {
  44. display: none;
  45. }
  46. .nav-item {
  47. border-bottom: 1px solid #35689c;
  48. }
  49. .nav-link {
  50. color: #fff;
  51. display: block;
  52. padding: 8px 15px;
  53. }
  54. .nav-link:hover {
  55. color: #fff;
  56. }
  57. @media (min-width: 768px) {
  58. .navbar-toggle {
  59. display: none;
  60. }
  61. .navbar-nav {
  62. background-color: transparent;
  63. border: none;
  64. display: block;
  65. height: 56px;
  66. position: static;
  67. }
  68. .navbar-nav.closed {
  69. display: block;
  70. }
  71. .nav-item {
  72. display: block;
  73. float: left;
  74. height: 56px;
  75. }
  76. .nav-link {
  77. height: 56px;
  78. line-height: 20px;
  79. padding: 17px 15px;
  80. }
  81. }