_main_header.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. // Main Header Component
  2. .main-header {
  3. background-color: #fff;
  4. border-top: 6px solid theme-color(success);
  5. box-shadow: 0 2px 3px rgba(#000, .125);
  6. .nav-link {
  7. padding: 1rem .4rem;
  8. }
  9. .nav-item {
  10. margin: 0!important;
  11. }
  12. .logo-icon {
  13. font-size: 30px;
  14. display: block;
  15. float: left;
  16. color: theme-color(success);
  17. height: 48px;
  18. line-height: 48px;
  19. border: 2px solid theme-color(success);
  20. padding: 0 5px;
  21. border-radius: $border-radius;
  22. @include media-breakpoint-down(xs) {
  23. height: 40px;
  24. line-height: 40px;
  25. font-size: 24px;
  26. }
  27. }
  28. .logo-wrapper {
  29. margin-left: 50px;
  30. }
  31. .logo-text {
  32. //letter-spacing: 2px;
  33. font-weight: bold;
  34. @include media-breakpoint-down(xs) {
  35. margin-top: 7px;
  36. display: inline-block;
  37. }
  38. }
  39. .dropdown-menu {
  40. min-width: 200px;
  41. @include media-breakpoint-up(lg) {
  42. max-height: 500px;
  43. overflow: auto;
  44. }
  45. }
  46. .dropdown.open > .dropdown-menu {
  47. display: block;
  48. }
  49. > .container {
  50. @include media-breakpoint-down(xs) {
  51. margin: 0 5px;
  52. }
  53. }
  54. .navbar-toggler {
  55. margin-top: 8px;
  56. @include media-breakpoint-down(xs) {
  57. margin-top: 4px;
  58. }
  59. }
  60. }
  61. .admin-menu-position-fixed {
  62. z-index: 999999!important;
  63. }
  64. [class*="navbar-toggleable"] {
  65. @include media-breakpoint-down(md) {
  66. > .navbar-nav {
  67. position: relative;
  68. width: 100%;
  69. display: block;
  70. float: none!important;
  71. .nav-item {
  72. display: block;
  73. float: none;
  74. }
  75. }
  76. }
  77. }