justified-nav.css 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. body {
  2. padding-top: 20px;
  3. }
  4. .footer {
  5. border-top: 1px solid #eee;
  6. margin-top: 40px;
  7. padding-top: 40px;
  8. padding-bottom: 40px;
  9. }
  10. /* Main marketing message and sign up button */
  11. .jumbotron {
  12. text-align: center;
  13. background-color: transparent;
  14. }
  15. .jumbotron .btn {
  16. font-size: 21px;
  17. padding: 14px 24px;
  18. }
  19. /* Customize the nav-justified links to be fill the entire space of the .navbar */
  20. .nav-justified {
  21. background-color: #eee;
  22. border-radius: 5px;
  23. border: 1px solid #ccc;
  24. }
  25. .nav-justified > li > a {
  26. margin-bottom: 0;
  27. padding-top: 15px;
  28. padding-bottom: 15px;
  29. color: #777;
  30. font-weight: bold;
  31. text-align: center;
  32. border-bottom: 1px solid #d5d5d5;
  33. background-color: #e5e5e5; /* Old browsers */
  34. background-repeat: repeat-x; /* Repeat the gradient */
  35. background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  36. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  37. background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
  38. background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
  39. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  40. background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
  41. }
  42. .nav-justified > .active > a,
  43. .nav-justified > .active > a:hover,
  44. .nav-justified > .active > a:focus {
  45. background-color: #ddd;
  46. background-image: none;
  47. box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
  48. }
  49. .nav-justified > li:first-child > a {
  50. border-radius: 5px 5px 0 0;
  51. }
  52. .nav-justified > li:last-child > a {
  53. border-bottom: 0;
  54. border-radius: 0 0 5px 5px;
  55. }
  56. @media (min-width: 768px) {
  57. .nav-justified {
  58. max-height: 52px;
  59. }
  60. .nav-justified > li > a {
  61. border-left: 1px solid #fff;
  62. border-right: 1px solid #d5d5d5;
  63. }
  64. .nav-justified > li:first-child > a {
  65. border-left: 0;
  66. border-radius: 5px 0 0 5px;
  67. }
  68. .nav-justified > li:last-child > a {
  69. border-radius: 0 5px 5px 0;
  70. border-right: 0;
  71. }
  72. }
  73. /* Responsive: Portrait tablets and up */
  74. @media screen and (min-width: 768px) {
  75. /* Remove the padding we set earlier */
  76. .masthead,
  77. .marketing,
  78. .footer {
  79. padding-left: 0;
  80. padding-right: 0;
  81. }
  82. }