You are here

Home » API reference » The Better Mega Menu 8

blue.css in The Better Mega Menu 8

Same filename and directory in other branches
  1. 7 css/styles/blue.css
  2. 2.x css/styles/blue.css
.tb-megamenu {
  background-color: #00aeee;
}

.tb-megamenu .nav > li > a,
.tb-megamenu .nav > li > span.tb-megamenu-no-link {
  border-right: 1px solid #4dc6f3;
}

.tb-megamenu .nav li.dropdown > .dropdown-toggle .caret {
  border-bottom-color: #fff;
  border-top-color: #fff;
}

.tb-megamenu .dropdown-menu {
  border-bottom-color: #00aeee;
}

.tb-megamenu .nav li.dropdown.active > .dropdown-toggle,
.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #009bd4;
  border-right-color: #4dc6f3;
  color: #fff;
}

.tb-megamenu .nav > li.dropdown.open.active > a:hover,
.tb-megamenu .nav > li.dropdown.open.active > a:focus,
.tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:hover,
.tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:focus {
  background-color: #fff;
  border-right-color: #4dc6f3;
  color: #00aeee;
}

.tb-megamenu .nav > li > a:focus,
.tb-megamenu .nav > li > a:hover,
.tb-megamenu .nav > li > span.tb-megamenu-no-link:focus,
.tb-megamenu .nav > li > span.tb-megamenu-no-link:hover {
  color: #00aeee;
}

.tb-megamenu .nav li.dropdown.open > .dropdown-toggle {
  color: #00aeee;
}

.tb-megamenu .dropdown-menu li > a:hover,
.tb-megamenu .dropdown-menu li > a:focus,
.tb-megamenu .dropdown-submenu:hover > a,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:hover,
.tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:focus,
.tb-megamenu .dropdown-submenu:hover > span.tb-megamenu-no-link {
  color: #00aeee;
}

.tb-megamenu .nav > .active > a,
.tb-megamenu .nav > .active > a:hover,
.tb-megamenu .nav > .active > a:focus,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link:hover,
.tb-megamenu .nav > .active > span.tb-megamenu-no-link:focus {
  color: #fff;
  text-shadow: none;
  background-color: #009bd4;
  background-image: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.tb-megamenu .block-view-demo .views-field-field-image img {
  border: 1px solid #eee;
}

.tb-megamenu .block-view-demo .item-list ul li {
  border-bottom: 1px solid #eee;
}

@media (max-width: 979px) {
  .tb-megamenu {
    background-color: inherit;
}
  .tb-megamenu .nav-collapse .nav > li > a:hover,
  .tb-megamenu .nav-collapse .nav > li > a:focus,
  .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link:hover,
  .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link:focus {
    color: #00aeee;
  }
  .tb-megamenu .nav-collapse .nav > li.active > a:hover,
  .tb-megamenu .nav-collapse .nav > li.active > a:focus,
  .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:hover,
  .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:focus {
    background-color: #00aeee;
    color: #fff;
}
}

File

css/styles/blue.css
View source 
  1. .tb-megamenu {

  2.   background-color: #00aeee;

  3. }

  4. 

  5. .tb-megamenu .nav > li > a,

  6. .tb-megamenu .nav > li > span.tb-megamenu-no-link {

  7.   border-right: 1px solid #4dc6f3;

  8. }

  9. 

  10. .tb-megamenu .nav li.dropdown > .dropdown-toggle .caret {

  11.   border-bottom-color: #fff;

  12.   border-top-color: #fff;

  13. }

  14. 

  15. .tb-megamenu .dropdown-menu {

  16.   border-bottom-color: #00aeee;

  17. }

  18. 

  19. .tb-megamenu .nav li.dropdown.active > .dropdown-toggle,

  20. .tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {

  21.   background-color: #009bd4;

  22.   border-right-color: #4dc6f3;

  23.   color: #fff;

  24. }

  25. 

  26. .tb-megamenu .nav > li.dropdown.open.active > a:hover,

  27. .tb-megamenu .nav > li.dropdown.open.active > a:focus,

  28. .tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:hover,

  29. .tb-megamenu .nav > li.dropdown.open.active > span.tb-megamenu-no-link:focus {

  30.   background-color: #fff;

  31.   border-right-color: #4dc6f3;

  32.   color: #00aeee;

  33. }

  34. 

  35. .tb-megamenu .nav > li > a:focus,

  36. .tb-megamenu .nav > li > a:hover,

  37. .tb-megamenu .nav > li > span.tb-megamenu-no-link:focus,

  38. .tb-megamenu .nav > li > span.tb-megamenu-no-link:hover {

  39.   color: #00aeee;

  40. }

  41. 

  42. .tb-megamenu .nav li.dropdown.open > .dropdown-toggle {

  43.   color: #00aeee;

  44. }

  45. 

  46. .tb-megamenu .dropdown-menu li > a:hover,

  47. .tb-megamenu .dropdown-menu li > a:focus,

  48. .tb-megamenu .dropdown-submenu:hover > a,

  49. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:hover,

  50. .tb-megamenu .dropdown-menu li > span.tb-megamenu-no-link:focus,

  51. .tb-megamenu .dropdown-submenu:hover > span.tb-megamenu-no-link {

  52.   color: #00aeee;

  53. }

  54. 

  55. .tb-megamenu .nav > .active > a,

  56. .tb-megamenu .nav > .active > a:hover,

  57. .tb-megamenu .nav > .active > a:focus,

  58. .tb-megamenu .nav > .active > span.tb-megamenu-no-link,

  59. .tb-megamenu .nav > .active > span.tb-megamenu-no-link:hover,

  60. .tb-megamenu .nav > .active > span.tb-megamenu-no-link:focus {

  61.   color: #fff;

  62.   text-shadow: none;

  63.   background-color: #009bd4;

  64.   background-image: none;

  65.   -webkit-box-shadow: none;

  66.   -moz-box-shadow: none;

  67.   box-shadow: none;

  68.   outline: none;

  69. }

  70. 

  71. .tb-megamenu .block-view-demo .views-field-field-image img {

  72.   border: 1px solid #eee;

  73. }

  74. 

  75. .tb-megamenu .block-view-demo .item-list ul li {

  76.   border-bottom: 1px solid #eee;

  77. }

  78. 

  79. @media (max-width: 979px) {

  80.   .tb-megamenu {

  81.     background-color: inherit;

  82. }

  83.   .tb-megamenu .nav-collapse .nav > li > a:hover,

  84.   .tb-megamenu .nav-collapse .nav > li > a:focus,

  85.   .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link:hover,

  86.   .tb-megamenu .nav-collapse .nav > li > span.tb-megamenu-no-link:focus {

  87.     color: #00aeee;

  88.   }

  89.   .tb-megamenu .nav-collapse .nav > li.active > a:hover,

  90.   .tb-megamenu .nav-collapse .nav > li.active > a:focus,

  91.   .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:hover,

  92.   .tb-megamenu .nav-collapse .nav > li.active > span.tb-megamenu-no-link:focus {

  93.     background-color: #00aeee;

  94.     color: #fff;

  95. }

  96. }