| /** start header */ |
| #header { |
| position: sticky; |
| top: 0; |
| z-index: 2; |
| box-shadow: 0 8px 8px -10px #d5d5d5; |
| background-color: #ffffff; |
| |
| #promotion-bar { |
| background-color: #333333; |
| padding: 8px; |
| |
| p { |
| font-size: 14px; |
| line-height: 1.4em; |
| font-weight: 600; |
| padding: 0; |
| margin: 0; |
| |
| color: #f0f0f0; |
| text-align: center; |
| |
| a { |
| color: #FCB903; |
| } |
| } |
| } |
| |
| #nav { |
| padding: 0.5rem 0; |
| margin-bottom: 0px !important; |
| .navbar-brand { |
| img { |
| width: 120px; |
| transition: all 0.5s ease; |
| } |
| } |
| .navbar-nav { |
| position: absolute; |
| right: 0; |
| |
| > li.nav-item { |
| font-size: 16px; |
| transition: width 0.2 ease, font-size 0.5s ease; |
| width:130px; |
| |
| } |
| |
| |
| li.nav-item { |
| |
| |
| a { |
| display: inline-block; |
| padding-right: 1.3em; |
| padding-left: 1.3em; |
| cursor: pointer; |
| // transition: padding 0.5s ease; |
| color: #000; |
| } |
| .btn-secondary { |
| padding: 0.3rem 1.2rem 0.4rem !important; |
| color: #ffffff; |
| } |
| .dropdown-toggle:after { |
| display: none; |
| } |
| |
| ul.dropdown-menu { |
| padding: 0.5em 0 0 1.3em; |
| |
| |
| box-shadow: 0px 5px 8px 0px theme-color('shadow-gray'), 0px -5px 8px 0px theme-color('shadow-gray'); |
| border-bottom: 5px solid theme-color('ignite-red'); |
| border-radius: 0; |
| |
| .dropdown-subtitle { |
| font-weight: 400; |
| font-size: 16px; |
| margin-top: 0.6em; |
| border-bottom: 3px solid theme-color('gray'); |
| margin-bottom: 0.5em; |
| |
| padding-bottom: 0.5em; |
| |
| } |
| |
| .dropdown-item { |
| padding: 0; |
| transition: background-color 200ms ease-in-out; |
| a { |
| padding: 0.4em 1.5em 0.4em 1em; |
| color: #000; |
| // padding: 0; |
| font-size: 14px; |
| display: block; |
| transition: none;; |
| } |
| a:hover { |
| text-decoration: none; |
| } |
| } |
| .dropdown-item:hover { |
| background-color: lighten(theme-color('gray'), 5%); |
| border-left:3px solid theme-color('secondary'); |
| // -webkit-animation: menuitemanimation 1000ms linear both; |
| // animation: menuitemanimation 1000ms linear both; |
| |
| a { |
| padding-left: calc(1em - 3px); |
| |
| } |
| } |
| .dropdown-item:active { |
| background-color: #ffffff; |
| } |
| |
| .dropdown-item:last-child { |
| border-bottom: 5px solid theme-color('secondary'); |
| padding-bottom: 1em; |
| margin-bottom: -5px; |
| } |
| } |
| |
| } |
| li.nav-item.show { |
| > a.dropdown-toggle { |
| font-weight: 700; |
| |
| } |
| } |
| } |
| } |
| } |
| #header.shrink { |
| |
| #nav .navbar-nav > li.nav-item { |
| // font-size: 15px !important; |
| width: 120px; |
| } |
| |
| |
| // img { |
| // width: 8rem !important; |
| // } |
| } |
| |
| // Medium devices (tablets, less than 992px) |
| // @media (max-width: 991.98px) { ... } |
| @include media-breakpoint-down(md) { |
| |
| |
| #header { |
| #nav { |
| .navbar-nav { |
| position: relative; |
| li.nav-item { |
| |
| a.btn { |
| margin-left: 1.3em; |
| } |
| |
| ul.dropdown-menu { |
| border: 0; |
| box-shadow: none; |
| margin-bottom: 2rem; |
| margin-left: 2rem; |
| border-left: 5px solid theme-color('secondary'); |
| |
| .dropdown-item:last-child { |
| border-bottom: none; |
| } |
| } |
| } |
| } |
| |
| |
| .navbar-brand { |
| img { |
| width: 9rem; |
| } |
| } |
| .navbar-toggler-icon { |
| i { |
| font-size: 2rem; |
| } |
| } |
| } |
| } |
| #header.shrink |
| #nav .navbar-nav > li.nav-item { |
| width: 100%; |
| } |
| |
| |
| |
| } |
| |
