_navbar.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. .navbar-light {
  2. box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  3. }
  4. .navbar-nav {
  5. .nav-item {
  6. position: relative;
  7. &:hover {
  8. @media (min-width: $lg) {
  9. &:before {
  10. content: "";
  11. width: 100%;
  12. border-top: 4px solid $theme-color;
  13. position: absolute;
  14. top: 3px;
  15. }
  16. }
  17. }
  18. &.active {
  19. @media (min-width: $lg) {
  20. &:before {
  21. content: "";
  22. width: 100%;
  23. border-top: 4px solid $theme-color;
  24. position: absolute;
  25. top: 3px;
  26. }
  27. }
  28. .nav-link {
  29. color: $theme-color;
  30. }
  31. }
  32. .nav-link {
  33. color: #3d3d3d;
  34. }
  35. }
  36. }
  37. .navbar-expand-lg {
  38. .navbar-nav {
  39. .nav-link {
  40. @media (min-width: $lg) {
  41. padding-right: 0.625rem;
  42. padding-left: 0.625rem;
  43. padding-bottom: 0;
  44. font-size: 1.0625rem;
  45. }
  46. }
  47. }
  48. }
  49. .navbar-toggler {
  50. padding: 0.3125rem;
  51. }