You are here

navbar.css in Open Social 8.9

.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent;
}

.nav > li.disabled > a,
.nav > li.disabled > button {
  color: #777;
}

.nav > li.disabled > a:hover, .nav > li.disabled > a:focus,
.nav > li.disabled > button:hover,
.nav > li.disabled > button:focus {
  color: #777;
}

.navbar-default {
  background-color: #333333;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > button {
  color: #ffffff;
  fill: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > button:hover,
.navbar-default .navbar-nav > li > button:focus {
  color: #e6e6e6;
  fill: #e6e6e6;
  background-color: #1a8dbe;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > button,
.navbar-default .navbar-nav > .active > button:hover,
.navbar-default .navbar-nav > .active > button:focus,
.navbar-default .navbar-nav > li > a.is-active,
.navbar-default .navbar-nav > li > a.is-active:hover,
.navbar-default .navbar-nav > li > a.is-active:focus,
.navbar-default .navbar-nav > li > button.is-active,
.navbar-default .navbar-nav > li > button.is-active:hover,
.navbar-default .navbar-nav > li > button.is-active:focus {
  color: #f3f3f3;
  fill: #f3f3f3;
  background-color: #1f1f1f;
}

.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus,
.navbar-default .navbar-nav > .disabled > button,
.navbar-default .navbar-nav > .disabled > button:hover,
.navbar-default .navbar-nav > .disabled > button:focus {
  color: #ccc;
  fill: #ccc;
  background-color: transparent;
}

.navbar-default .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus,
.navbar-default .dropdown-menu > li > button:hover,
.navbar-default .dropdown-menu > li > button:focus {
  background-color: #f5f5f5;
}

.navbar-default .dropdown-menu > li > a.is-active,
.navbar-default .dropdown-menu > li > button.is-active {
  background-color: #e6e6e6;
  color: #4d4d4d;
  font-weight: 500;
}

.navbar-default .dropdown-menu > li > a.is-active:hover, .navbar-default .dropdown-menu > li > a.is-active:focus,
.navbar-default .dropdown-menu > li > button.is-active:hover,
.navbar-default .dropdown-menu > li > button.is-active:focus {
  cursor: default;
}

.navbar-default .navbar-toggle {
  border-radius: 0;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #222222;
}

.navbar-default .navbar-collapse {
  border-color: #ffffff;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > button,
.navbar-default .navbar-nav > .open > button:hover,
.navbar-default .navbar-nav > .open > button:focus {
  background-color: #1f1f1f;
  color: #f3f3f3;
}

.navbar-default .dropdown img {
  border-radius: 50%;
}

.navbar-default .profile img {
  border: 2px solid white;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.navbar-search .form-group {
  border-radius: 5px;
}

.navbar-search .form-submit {
  border-radius: 0 5px 5px 0;
}

.navbar__open-search-block {
  background: rgba(51, 51, 51, 0.95);
}

.navbar-nav__icon {
  fill: #ffffff;
}

.navbar-secondary {
  background-color: #1f80aa;
}

.navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {
  color: #fff;
}

.navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {
  border-bottom-color: #fff;
}

.navbar-secondary .navbar-nav li:not(.active) a:hover,
.navbar-secondary .navbar-nav li:not(.active) button:hover,
.navbar-secondary .navbar-nav li:not(.active) a:focus,
.navbar-secondary .navbar-nav li:not(.active) button:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.3);
}

.navbar-scrollable:after {
  background: linear-gradient(to right, rgba(31, 128, 170, 0), #1f80aa);
}

@media (min-width: 900px) {
  .search-take-over .form-text {
    color: #ffffff;
  }
  .search-take-over .form-text:focus {
    border-color: #ffffff;
    box-shadow: 0 2px 0 0 #ffffff;
  }
}

@media (max-width: 599px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button:focus {
    color: #e6e6e6;
    background-color: #1a8dbe;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button:focus {
    color: #f3f3f3;
    background-color: #1f1f1f;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:focus {
    color: #ccc;
    background-color: transparent;
  }
}

@media (max-width: 899px) {
  .navbar-collapse .dropdown-menu li a,
  .navbar-collapse .dropdown-menu li button {
    color: #ffffff;
  }
  .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus,
  .navbar-collapse .dropdown-menu li button:hover,
  .navbar-collapse .dropdown-menu li button:focus {
    background-color: #1f80aa;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button {
    color: #4d4d4d;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > button:focus {
    color: #404040;
    background-color: #f5f5f5;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > button:focus {
    color: #ffffff;
    background-color: #1f80aa;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:focus {
    color: #4d4d4d;
    background-color: #777;
  }
}

File

themes/socialblue/assets/css/navbar.css
View source
  1. .nav > li > a:hover,
  2. .nav > li > a:focus {
  3. background-color: transparent;
  4. }
  5. .nav > li.disabled > a,
  6. .nav > li.disabled > button {
  7. color: #777;
  8. }
  9. .nav > li.disabled > a:hover, .nav > li.disabled > a:focus,
  10. .nav > li.disabled > button:hover,
  11. .nav > li.disabled > button:focus {
  12. color: #777;
  13. }
  14. .navbar-default {
  15. background-color: #333333;
  16. }
  17. .navbar-default .navbar-nav > li > a,
  18. .navbar-default .navbar-nav > li > button {
  19. color: #ffffff;
  20. fill: #ffffff;
  21. }
  22. .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
  23. .navbar-default .navbar-nav > li > button:hover,
  24. .navbar-default .navbar-nav > li > button:focus {
  25. color: #e6e6e6;
  26. fill: #e6e6e6;
  27. background-color: #1a8dbe;
  28. }
  29. .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
  30. .navbar-default .navbar-nav > .active > button,
  31. .navbar-default .navbar-nav > .active > button:hover,
  32. .navbar-default .navbar-nav > .active > button:focus,
  33. .navbar-default .navbar-nav > li > a.is-active,
  34. .navbar-default .navbar-nav > li > a.is-active:hover,
  35. .navbar-default .navbar-nav > li > a.is-active:focus,
  36. .navbar-default .navbar-nav > li > button.is-active,
  37. .navbar-default .navbar-nav > li > button.is-active:hover,
  38. .navbar-default .navbar-nav > li > button.is-active:focus {
  39. color: #f3f3f3;
  40. fill: #f3f3f3;
  41. background-color: #1f1f1f;
  42. }
  43. .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus,
  44. .navbar-default .navbar-nav > .disabled > button,
  45. .navbar-default .navbar-nav > .disabled > button:hover,
  46. .navbar-default .navbar-nav > .disabled > button:focus {
  47. color: #ccc;
  48. fill: #ccc;
  49. background-color: transparent;
  50. }
  51. .navbar-default .dropdown-menu {
  52. border-top-left-radius: 0;
  53. border-top-right-radius: 0;
  54. }
  55. .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus,
  56. .navbar-default .dropdown-menu > li > button:hover,
  57. .navbar-default .dropdown-menu > li > button:focus {
  58. background-color: #f5f5f5;
  59. }
  60. .navbar-default .dropdown-menu > li > a.is-active,
  61. .navbar-default .dropdown-menu > li > button.is-active {
  62. background-color: #e6e6e6;
  63. color: #4d4d4d;
  64. font-weight: 500;
  65. }
  66. .navbar-default .dropdown-menu > li > a.is-active:hover, .navbar-default .dropdown-menu > li > a.is-active:focus,
  67. .navbar-default .dropdown-menu > li > button.is-active:hover,
  68. .navbar-default .dropdown-menu > li > button.is-active:focus {
  69. cursor: default;
  70. }
  71. .navbar-default .navbar-toggle {
  72. border-radius: 0;
  73. }
  74. .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  75. background-color: #222222;
  76. }
  77. .navbar-default .navbar-collapse {
  78. border-color: #ffffff;
  79. }
  80. .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
  81. .navbar-default .navbar-nav > .open > button,
  82. .navbar-default .navbar-nav > .open > button:hover,
  83. .navbar-default .navbar-nav > .open > button:focus {
  84. background-color: #1f1f1f;
  85. color: #f3f3f3;
  86. }
  87. .navbar-default .dropdown img {
  88. border-radius: 50%;
  89. }
  90. .navbar-default .profile img {
  91. border: 2px solid white;
  92. width: 24px;
  93. height: 24px;
  94. overflow: hidden;
  95. }
  96. .navbar-search .form-group {
  97. border-radius: 5px;
  98. }
  99. .navbar-search .form-submit {
  100. border-radius: 0 5px 5px 0;
  101. }
  102. .navbar__open-search-block {
  103. background: rgba(51, 51, 51, 0.95);
  104. }
  105. .navbar-nav__icon {
  106. fill: #ffffff;
  107. }
  108. .navbar-secondary {
  109. background-color: #1f80aa;
  110. }
  111. .navbar-secondary .navbar-nav a, .navbar-secondary .navbar-nav button {
  112. color: #fff;
  113. }
  114. .navbar-secondary .navbar-nav li.active a, .navbar-secondary .navbar-nav li.active button {
  115. border-bottom-color: #fff;
  116. }
  117. .navbar-secondary .navbar-nav li:not(.active) a:hover,
  118. .navbar-secondary .navbar-nav li:not(.active) button:hover,
  119. .navbar-secondary .navbar-nav li:not(.active) a:focus,
  120. .navbar-secondary .navbar-nav li:not(.active) button:focus {
  121. outline: none;
  122. background-color: rgba(0, 0, 0, 0.3);
  123. border-bottom-color: rgba(0, 0, 0, 0.3);
  124. }
  125. .navbar-scrollable:after {
  126. background: linear-gradient(to right, rgba(31, 128, 170, 0), #1f80aa);
  127. }
  128. @media (min-width: 900px) {
  129. .search-take-over .form-text {
  130. color: #ffffff;
  131. }
  132. .search-take-over .form-text:focus {
  133. border-color: #ffffff;
  134. box-shadow: 0 2px 0 0 #ffffff;
  135. }
  136. }
  137. @media (max-width: 599px) {
  138. .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  139. .navbar-default .navbar-nav .open .dropdown-menu > li > button {
  140. color: #ffffff;
  141. }
  142. .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  143. .navbar-default .navbar-nav .open .dropdown-menu > li > button:hover,
  144. .navbar-default .navbar-nav .open .dropdown-menu > li > button:focus {
  145. color: #e6e6e6;
  146. background-color: #1a8dbe;
  147. }
  148. .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
  149. .navbar-default .navbar-nav .open .dropdown-menu > .active > button,
  150. .navbar-default .navbar-nav .open .dropdown-menu > .active > button:hover,
  151. .navbar-default .navbar-nav .open .dropdown-menu > .active > button:focus {
  152. color: #f3f3f3;
  153. background-color: #1f1f1f;
  154. }
  155. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus,
  156. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button,
  157. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:hover,
  158. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:focus {
  159. color: #ccc;
  160. background-color: transparent;
  161. }
  162. }
  163. @media (max-width: 899px) {
  164. .navbar-collapse .dropdown-menu li a,
  165. .navbar-collapse .dropdown-menu li button {
  166. color: #ffffff;
  167. }
  168. .navbar-collapse .dropdown-menu li a:hover, .navbar-collapse .dropdown-menu li a:focus,
  169. .navbar-collapse .dropdown-menu li button:hover,
  170. .navbar-collapse .dropdown-menu li button:focus {
  171. background-color: #1f80aa;
  172. }
  173. .navbar-default .navbar-nav .open .dropdown-menu > li > a,
  174. .navbar-default .navbar-nav .open .dropdown-menu > li > button {
  175. color: #4d4d4d;
  176. }
  177. .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
  178. .navbar-default .navbar-nav .open .dropdown-menu > li > button:hover,
  179. .navbar-default .navbar-nav .open .dropdown-menu > li > button:focus {
  180. color: #404040;
  181. background-color: #f5f5f5;
  182. }
  183. .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
  184. .navbar-default .navbar-nav .open .dropdown-menu > .active > button,
  185. .navbar-default .navbar-nav .open .dropdown-menu > .active > button:hover,
  186. .navbar-default .navbar-nav .open .dropdown-menu > .active > button:focus {
  187. color: #ffffff;
  188. background-color: #1f80aa;
  189. }
  190. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus,
  191. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button,
  192. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:hover,
  193. .navbar-default .navbar-nav .open .dropdown-menu > .disabled > button:focus {
  194. color: #4d4d4d;
  195. background-color: #777;
  196. }
  197. }