Hello all,
My website is http://www.gogohelpbuy.com/. I have customized theme. It looks perfect on the desktop version. However, on the mobile version, the color of the navi (drop down) is hardly see. (See below screenshot) Does anyone know how to make the drop down arrows to black color so they can be seen? Thank you!
Well.... I did add to 2 locations but still not working.... 
@media screen and (max-width: 992px) {
body.cart-full #wsite-mini-cart {
display: block !important;
}
body.cart-full .wsite-footer {
padding-bottom: 70px;
}
.container {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
body.nav-open .mobile-nav {
max-height: 100vh;
padding: 10px 0;
opacity: 1;
}
h2 {
font-size: 1.75em;
}
.paris-header {
-webkit-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
}
.paris-header .container {
padding: 10px 0;
}
.paris-header label.hamburger {
display: table-cell;
vertical-align: middle;
width: 30px;
height: 30px;
padding: 0 10px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 255);
}
.paris-header label.hamburger span:before,
.paris-header label.hamburger span,
.paris-header label.hamburger span:after {
position: relative;
display: block;
width: 22px;
height: 2px;
background: #000000;
content: '';
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.paris-header label.hamburger span {
left: 4px;
margin: 5px 0;
}
.paris-header label.hamburger span:before {
top: -8px;
}
.paris-header label.hamburger span:after {
bottom: -6px;
}
.paris-header .logo {
padding-right: 15px;
text-align: center;
}
.paris-header .logo #wsite-title {
font-size: 1em !important;
line-height: 1.3em !important;
}
.desktop-nav {
display: none;
}
.mobile-nav {
position: fixed;
top: 0;
left: 0;
z-index: 14;
display: block;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
max-height: 0;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
-webkit-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-moz-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-ms-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
-o-transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
transition: all 500ms cubic-bezier(0, 0.995, 0.99, 1);
}
.mobile-nav label.hamburger {
position: relative;
top: 9px;
left: 3px;
display: block;
width: 30px;
height: 30px;
padding: 0 10px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255, 255, 255, 255);
}
.mobile-nav label.hamburger span:before,
.mobile-nav label.hamburger span,
.mobile-nav label.hamburger span:after {
position: relative;
top: 10px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
content: '';
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.mobile-nav label.hamburger span {
background: transparent;
}
.mobile-nav label.hamburger span:before {
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.mobile-nav label.hamburger span:after {
top: -1px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.mobile-nav ul {
float: none;
display: block;
width: 100%;
height: auto;
}
.mobile-nav li {
position: relative;
float: none;
display: block !important;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
.mobile-nav li a.wsite-menu-item,
.mobile-nav li a.wsite-menu-subitem {
padding: 10px 0;
font-size: 1em;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.mobile-nav li .wsite-menu-wrap {
display: block !important;
overflow: hidden;
max-height: 0;
-webkit-transition: all 500ms ease-in-out 250ms;
-moz-transition: all 500ms ease-in-out 250ms;
-ms-transition: all 500ms ease-in-out 250ms;
-o-transition: all 500ms ease-in-out 250ms;
transition: all 500ms ease-in-out 250ms;
}
.mobile-nav li .wsite-menu-wrap li.wsite-nav-current > a {
color: @linkColor;
}
.mobile-nav li .wsite-menu-wrap li.wsite-nav-current > span.icon-caret:before,
.mobile-nav li .wsite-menu-wrap li.wsite-nav-current > span.icon-caret:after {
background: @linkColor;
}
.mobile-nav li .wsite-menu-wrap .wsite-menu-arrow {
display: none;
}
.mobile-nav li.wsite-menu-item-wrap#active > a,
.mobile-nav li.wsite-menu-item-wrap > a:hover,
.mobile-nav li.wsite-menu-subitem-wrap > a:hover {
background: none;
color: @linkColor;
}
.mobile-nav li.has-submenu.wsite-menu-item-wrap#active > span.icon-caret:before,
.mobile-nav li.has-submenu.wsite-menu-item-wrap#active > span.icon-caret:after {
background: @linkColor;
}
.mobile-nav li.has-submenu.wsite-menu-item-wrap a:hover ~ span.icon-caret:before,
.mobile-nav li.has-submenu.wsite-menu-subitem-wrap a:hover ~ span.icon-caret:before,
.mobile-nav li.has-submenu.wsite-menu-item-wrap a:hover ~ span.icon-caret:after,
.mobile-nav li.has-submenu.wsite-menu-subitem-wrap a:hover ~ span.icon-caret:after {
background: @linkColor;
}
.mobile-nav li.has-submenu > span.icon-caret {
position: absolute;
top: 0;
right: 10px;
display: block;
width: 20px;
height: 20px;
padding: 10px;
cursor: pointer;
color: #000;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.mobile-nav li.has-submenu > span.icon-caret:before,
.mobile-nav li.has-submenu > span.icon-caret:after {
position: relative;
display: block;
background: #ffffff;
width: 2px;
height: 8px;
content: ' ';
}
.mobile-nav li.has-submenu > span.icon-caret:before {
top: 5px;
left: 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.mobile-nav li.has-submenu > span.icon-caret:after {
top: -3px;
left: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.mobile-nav li.has-submenu .wsite-menu-wrap.open {
max-height: 1000px;
}
.mobile-nav li.wsite-nav-more {
display: none !important;
}
@Media screen and (max-width: 992px)
{
.mobile-nav li.has-submenu > span.icon-caret
{
color: #000;
}
}
/* Banner */
.banner-wrap .banner {
overflow-x: hidden;
}
.banner-wrap .container {
padding: 50px 20px;
}
.banner-wrap .banner h2 {
font-size: 36px !important;
line-height: 1.2 !important;
padding-bottom: 20px;
}
.banner-wrap .banner p {
font-size: 16px !important;
line-height: 1.7em;
padding-bottom: 30px;
}
/* Content */
.main-wrap .container {
padding: 30px 20px;
box-sizing: border-box;
}
/* Footer */
.footer-wrap .container {
padding: 0;
}
.footer-wrap .wsite-footer {
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
}
.footer-wrap td.wsite-multicol-col {
margin-bottom: 25px !important;
}
.footer-wrap td.wsite-multicol-col:last-child {
width: 100% !important;
}
/* Mini cart */
#wsite-mini-cart {
position: fixed !important;
top: initial !important;
left: 0 !important;
bottom: 0px;
z-index: 8;
width: 100%;
border-top: 1px solid @linkColor !important;
border-radius: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#wsite-mini-cart.arrow-top {
border: none;
}
#wsite-mini-cart.arrow-top:before,
#wsite-mini-cart.arrow-top:after,
#wsite-mini-cart.arrow-left:before,
#wsite-mini-cart.arrow-left:after {
border: none !important;
}
#wsite-mini-cart.full {
display: block !important;
}
#wsite-mini-cart .wsite-product-list {
display: none;
}
/* Tall header page */
.tall-header-page .banner-wrap .banner h2 {
font-size: 2.6em;
line-height: 1.2em;
padding-bottom: 20px;
}
/* Tall header page */
.short-header-page .banner-wrap .banner h2 {
font-size: 2.6em;
line-height: 1.2em;
padding-bottom: 0;
}
/* No header page */
.no-header-page .main-wrap .container {
padding-top: 0;
padding-bottom: 0;
}
/* Splash page */
.splash-page .main-wrap > .container {
padding-left: 1.5em;
padding-right: 1.5em;
}
.splash-page .main-wrap .splash-content {
padding: 0;
}
.splash-page .main-wrap .splash-content h2 {
font-size: 2.6em;
line-height: 1.2em;
}
.splash-page .main-wrap .splash-content p {
font-size: 1.2em;
line-height: 1.7em;
padding-bottom: 15px;
}
}
@media screen and (max-width: 992px) and (orientation: landscape) {
.landing-page #contentArrow {
margin-top: 1em;
}
}
@media screen and (max-width: 767px) {
body {
background-size: initial;
background-position: top center;
background-attachment: inherit;
font-size: 15px;
}
.wsite-section-elements {
overflow: hidden;
}
/* Banner */
.banner-wrap .banner p {
font-size: 1.1em;
line-height: 1.6em;
}
.banner h2 span,
.banner h2 font,
.banner p span,
.banner p font,
h2 .wsite-headline,
p .wsite-headline-paragraph,
p font,
h2 font {
font-size: inherit !important;
line-height: inherit !important;
}
/* Content */
.main-wrap {
background: #ffffff;
}
/* Table override */
td.wsite-multicol-col {
display: block;
float: none;
width: 100% !important;
box-sizing: border-box;
}
/* Gallery */
.imageGallery > div {
width: 50% !important;
}
/* Tall header page */
.tall-header-page .banner-wrap .banner h2 {
font-size: 2.75em;
line-height: 1.2em;
}
/* Short header page */
.short-header-page .banner-wrap .banner h2 {
font-size: 2.75em;
line-height: 1.2em;
}
/* Splash page */
.splash-page .main-wrap .splash-content h2 {
font-size: 2.75em;
line-height: 1.2em;
}
.splash-page .main-wrap .splash-content p {
font-size: 1.1em;
line-height: 1.6em;
}
/* Blog */
#blogTable .blog-post h2.blog-title {
font-size: 1.5em;
}
#blogTable td {
float: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
#blogTable td.blog-sidebar {
width: 100%;
}
#blogTable td .blog-body {
float: none !important;
}
#blogTable td .column-blog {
width: 100%;
float: none;
}
#blogTable td .column-blog .blog-sidebar-separator {
padding: 0;
}
/* Store */
#wsite-com-store {
/* Category Dropdown */
}
#wsite-com-store .wsite-com-category-subcategory-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-featured-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-group .wsite-com-column {
float: left;
width: 50% !important;
}
#wsite-com-store .wsite-com-sidebar {
position: relative;
float: none !important;
z-index: 4;
width: 100%;
min-height: 35px;
margin: 0 auto 15px;
padding: 0;
text-align: center;
}
#wsite-com-store .wsite-com-sidebar:before {
display: block;
width: 100%;
padding: 10px 18px;
box-sizing: border-box;
text-align: center;
text-transform: uppercase;
content: 'VIEW ALL CATEGORIES\00a0\00a0\25be';
font-weight: 700;
cursor: pointer;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy {
position: relative;
display: block;
overflow: hidden;
width: 100%;
max-height: 0px;
padding: 0;
background: #ffffff;
box-sizing: border-box;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy > ul {
width: 100%;
padding: 0;
}
#wsite-com-store .wsite-com-sidebar #wsite-com-hierarchy > ul li {
margin-bottom: 15px;
}
#wsite-com-store .wsite-com-sidebar.sidebar-expanded {
cursor: default !important;
}
#wsite-com-store .wsite-com-sidebar.sidebar-expanded:before {
content: 'CLOSE\00a0\00a0\25b4';
}
#wsite-com-store .wsite-com-sidebar.sidebar-expanded #wsite-com-hierarchy {
max-height: 1000px;
padding: 10px 0;
}
#wsite-com-store .wiste-com-content-with-sidebar {
margin-left: 0;
}
/* Product */
.wsite-product .wsite-product-top {
width: 100%;
}
.wsite-product .wsite-product-button-wrap {
width: auto;
}
#wsite-com-product-images {
float: none;
width: 100%;
margin-bottom: 20px;
}
#wsite-com-product-info {
float: none;
clear: both;
width: 100%;
margin-left: 0;
}
#wsite-com-product-info h2 {
padding-top: 20px;
}
#wsite-com-product-price-area .wsite-com-product-price-container {
font-size: 0.8em;
}
#wsite-com-product-images-strip .wsite-com-product-images-secondary-outer {
margin-bottom: 10px;
}
/* Search */
#wsite-search-sidebar {
position: relative;
z-index: 4;
overflow-y: hidden;
width: 100%;
max-height: 35px;
padding: 0;
box-sizing: border-box;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#wsite-search-sidebar:before {
display: block;
width: 100%;
padding: 10px 18px;
box-sizing: border-box;
text-align: center;
text-transform: uppercase;
content: 'VIEW SEARCH FILTERS\00a0\00a0\25be';
font-weight: 700;
cursor: pointer;
}
#wsite-search-sidebar.sidebar-expanded {
max-height: 1000px;
cursor: default !important;
}
#wsite-search-sidebar.sidebar-expanded:before {
content: 'CLOSE\00a0\00a0\25b4';
}
#wsite-search-header h2 {
width: 100%;
margin-bottom: 10px;
font-size: 1.6em;
}
#wsite-search-form-container {
float: none;
width: 100%;
}
#wsite-search-query {
padding: 2px 10px;
}
#wsite-search-sidebar .wsite-search-facet-price input {
width: 100%;
margin: 10px 0;
padding: 6px!important;
}
#wsite-search-results {
width: 100%;
}
#wsite-search-product-results .wsite-search-product-result {
width: 100%;
padding-right: 0;
}
/* Checkout */
#wsite-com-checkout-list .wsite-form-input,
#wsite-com-checkout-summary-list .wsite-form-input {
width: 20px;
}
#wsite-com-checkout-list .wsite-form-input.wsite-coupon-input,
#wsite-com-checkout-summary-list .wsite-form-input.wsite-coupon-input {
width: 100%;
max-width: 95px;
}
#wsite-com-checkout-list td {
padding: 10px 0 20px;
}
#wsite-com-checkout-list .wsite-remove-button,
#wsite-com-checkout-summary-list .wsite-remove-button {
top: 44px;
left: -10px;
}
.wsite-com-continue-shopping .caret {
display: inline-block;
margin-top: 2px;
}
/* Secure Checkout */
.wsite-com-checkout-payment-column,
.wsite-com-checkout-summary-column {
float: none;
width: 100%;
}
}
@media screen and (max-width: 320px) {
.banner-wrap .container {
padding: 50px 5px;
}
/* Store */
#wsite-com-store .wsite-com-category-subcategory-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-featured-group .wsite-com-column,
#wsite-com-store .wsite-com-category-product-group .wsite-com-column {
float: none;
width: 100% !important;
}
#wsite-com-checkout-list .wsite-com-checkout-item-image,
#wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
display: none;
}
#wsite-com-checkout-list tbody td:first-child,
#wsite-com-checkout-summary-list tbody td:first-child {
width: 0;
padding: 0;
}
#wsite-com-checkout-list .wsite-com-checkout-item-details-inner,
#wsite-com-checkout-summary-list .wsite-com-checkout-item-details-inner {
padding-left: 0;
}
}
@Media screen and (max-width: 992px)
{
.mobile-nav li.has-submenu > span.icon-caret
{
color: #000;
}
}
