.quickMenu .nav{ width: 100%; } /*---------------------------- The Wrapper ------------------------------*/ /*The Wrapper */ .quickMenu .nav-wrapper{ margin-top: 70px; } /*---------------------------- The Toggle ------------------------------*/ .quickMenu .navbar-toggle{ padding: 3px 4px; border: 0px; height: 39px; width: 40px; margin: 0px; box-sizing: border-box; position: relative; right: 20px; bottom: 40px; } /* .navbar-toggle:focus{ border: 0px; outline: 0px; } */ /* .navbar-toggle>span{ color: #ffffff; } */ /*---------------------------- Full State -The first section is the most important. ------------------------------*/ .quickMenu .nav>li>a>img{ height: 30px; width: 30px; padding-left:5px; } .quickMenu .nav>li.mobile{ display: none; } .quickMenu .nav .open>a, .quickMenu .nav .open>a:hover, .quickMenu .nav .open>a:focus { background-color: #85866c; } /* .nav .our-caret { border: 0px; border-top-color: #ffffff; border-bottom-color: #ffffff; font-size: 10px; } */ /*------ Second tier Items/Multi Tier */ /*------ On Hover/Focus/.open */ /*---------------------------- Collapsed State - make sure you want to touch it before you touch it. -This is a bootstrap fix. You usually won't have to touch these. ------------------------------*/ /*---------------------------- Dropdown Menus - full/collapsed ------------------------------*/ .members-button{ padding: 10px; text-align:center; } .quickMenu .nav>li:last-child>a:hover{ background-color:#4D4D4D; } /*--------------------------------------------- Mobile Menu ---------------------------------------------*/ button#mobile-toggle{ width: 37px; height: 37px; border: 2px solid #895E90; display: block; position: absolute; right: 15px; top: -60px; border-radius: 5px; box-sizing: border-box; padding: 8px 5px; background-color: white; box-shadow : 0px 1.5px 1px rgba(0, 0, 0, 0.3); cursor: pointer; } button#mobile-toggle svg{ } #mobile-menu>li#triggerClose { display: flex; justify-content: flex-end; /* float: right; */ font-size: 22px; cursor: pointer; color: white; } #mobile-menu>li#triggerClose>span { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #mobile-menu>li#mobile-logo{ position: relative; top: -10px; width: 80%; } #mobile-menu>li#mobile-logo>a{ display: inline; max-width: 80%; } #mobile-menu .search_bar { border: none; width: 100%; } #mobile-menu>li #q{ width: 100%; } #mobile-menu>li>a{ width: 174px; min-height: 32px; margin-bottom: 6px; border-radius: 3px; background-color: transparent; padding-left: 8px; padding-top: 10px; padding-right: 5px; display: inline-block; font-size: 16px; font-weight: 400; color: #895E90; -webkit-transition: color .25s; transition: color .25s; } #mobileMenuWrapper { /* The menu wrapper is the div that surrounds the mobile menu. You'll want to make sure this has a background of some sort so the text shows up/doesn't appear over other text Setting bottom:0px; is needed to make a long menu scroll-able. /* REQUIRED */ position: fixed; top:0px; bottom: 0px; /* If having the menu slide in from the top or bottom, comment out this line */ z-index: 1000; overflow-y: auto; overflow-x: hidden; /* CHANGEABLE-ISH */ left: -120%; /* Change this to left, right, top, or bottom. You'll also have to make a change in the open state */ width: 300px; /* The mobile menu works best with a pre-defined width. Percentages also work great here. */ /* CHANGEABLE */ background-color: #5B9CD4; border: none; /* Transition - bump */ transition: left .3s; /* ##DIRECTION-02 */ -webkit-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000); /* older webkit */ -webkit-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000); -moz-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000); -o-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000); transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000); } #mobileMenuWrapper.open{ left: 0px; /* This is required. If you changed the direction attribute above, change it here too. */ bottom: 0px; /* This line is here for bottom/top slide-ins. See note on bottom above.*/ } /* REQUIRED - Dropdown menu item transition states*/ #mobileMenuWrapper .mDropdown { display:none; } #mobileMenuWrapper .mDropdown.open{ display: block; } /* REQUIRED - Sets the ULs to not have dots, or be spaced in the typical UL fashion. */ #mobileMenuWrapper ul{ list-style-type: none; margin: 0px; padding: 0px; } /* OPTIONAL-ISH - These are the settings for the base menu UL */ #mobileMenuWrapper #mobile-menu{ overflow: auto; padding: 15px 15px 15px 10px; } /* OPTIONAL-ISH - This sets each link on its own line fo' sho' */ /*#mobileMenuWrapper a, #mobileMenuWrapper div{ display: block; }*/ /* OPTIONAL - The actual A's. Style them as you wish*/ /* Top Level / all*/ #mobileMenuWrapper #mobile-menu a { display: inline-block; width: 100%; color: white; font-weight: 600; } /* dropdown only */ #mobileMenuWrapper .mDropdown a { padding: 8px; margin-bottom: 10px; } #mobile-menu > li > ul { background-color: rgba(0,0,0,.04); } /*------------------------------------------------------------------------------------ @Media and Sizes --------------------------------------------------------------------------------------*/ /*------ Nav collapse @ Tablet size ------*/ @media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } /* since 3.1.0 */ .navbar-collapse.collapse.in { display: block!important; } .collapsing { overflow: hidden!important; } /*.dropdown-menu { border: none; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; }*/ } @media (min-width: 768px) and (max-width: 990px) { } @media (max-width: 767px) { } @media (max-width: 480px) { }