You are here

Home » API reference » The Better Mega Menu 2.x

green.css in The Better Mega Menu 2.x

Same filename and directory in other branches
  1. 8 css/styles/green.css
  2. 7 css/styles/green.css
.tb-megamenu .dropdown-menu {
  border-bottom-color: #abba64;
}

.tb-megamenu .nav li.dropdown.active > .dropdown-toggle,
.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #abba64;
}

.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: #abba64;
}

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

.tb-megamenu .nav li.dropdown.open > .dropdown-toggle,
.tb-megamenu .nav li.dropdown.open.active > .dropdown-toggle {
  background-color: #fff;
  color: #abba64;
}
.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;
  color: #abba64;
}

.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: #abba64;
}

.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: #abba64;
  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 .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: #abba64;
  }
  .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: #abba64;
    color: #fff;
}
}

File

css/styles/green.css
View source 
  1. .tb-megamenu .dropdown-menu {

  2.   border-bottom-color: #abba64;

  3. }

  4. 

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

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

  7.   background-color: #abba64;

  8. }

  9. 

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

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

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

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

  14.   color: #abba64;

  15. }

  16. 

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

  18.   color: #abba64;

  19. }

  20. 

  21. .tb-megamenu .nav li.dropdown.open > .dropdown-toggle,

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

  23.   background-color: #fff;

  24.   color: #abba64;

  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.   color: #abba64;

  32. }

  33. 

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

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

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

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

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

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

  40.   color: #abba64;

  41. }

  42. 

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

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

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

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

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

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

  49.   color: #fff;

  50.   text-shadow: none;

  51.   background-color: #abba64;

  52.   background-image: none;

  53.   -webkit-box-shadow: none;

  54.   -moz-box-shadow: none;

  55.   box-shadow: none;

  56.   outline: none;

  57. }

  58. 

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

  60.   border: 1px solid #eee;

  61. }

  62. 

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

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

  65. }

  66. 

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

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

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

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

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

  72.     color: #abba64;

  73.   }

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

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

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

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

  78.     background-color: #abba64;

  79.     color: #fff;

  80. }

  81. }