Docs

[Daniel Eichar]

Hello,

Ive attached an example. I am trying to change the color of the sub menu text from grey to white. I am only able to change the heading and sub text at the same time but not one or the other. This is on the mobile version only. I am able to do this on all other sizes.

[Prasant Rai]

Hello Daniel,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Daniel Eichar]

Hello,

Here is the url: https://www.pelicancommerce.com/

[Friech]

Hi There,

Thanks for the URL but it seems you figured this out while I’m checking your page.

Anyway please check your whole custom CSS here http://csslint.net/ and resolve all errors, else any custom css you added that follows a syntax would not work

Then you can add this custom CSS.

@media (max-width:  979px) {
	.x-colophon.top .menu li a {
		color: #fff;
	}
}

Hope it helps, Cheers!

[Daniel Eichar]

For some reason this is still not working. On MOBILE only it still comes up as grey text and on desktop it is white.

[Nabeel A]

Hi again,

It looks like you’re using a cache plugin. Please clear all the cache and try deactivating all third party plugins and see if this works for you.

Let us know how this goes!

[Daniel Eichar]

This did not work. I can easily change the color on desktop version but not on the mobile. Help! =)

[Rad]

Hi there,

Please try this,

.x-colophon .widget ul li a, .x-colophon .widget ol li a {
    color: #fff !important;
}

That should do it 🙂

Cheers!

[Daniel Eichar]

This did not fix it. I believe it could be another CSS field listed because in the past I had this working. Here is a list of all the CSS Global Code I have in place..

/*
// Buttons
*/

.x-btn {
  font-weight: 700;
}

.x-btn.x-btn-alt,
.button.x-btn-alt,[type="submit"].x-btn-alt {
  border-color: #02aed6;
  background-color: #02aed6;
  box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type="submit"].x-btn-alt:hover {
  border-color: #0b8ead;
  background-color: #0b8ead;
  box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

/*
// Dropcap
*/

.x-dropcap {
  background-color: #02aed6;
}

/*
// Headings - Dark section
*/

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section h1 a,
.dark-section h2 a,
.dark-section h3 a,
.dark-section h4 a,
.dark-section h5 a,
.dark-section h6 a {
  color: #fff;
}

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
  color: #fff;
  opacity: 0.65;
}

/*
// Sidebar
*/

.widget a {
  color: #02aed6;
}

/*
// Contact Form 7
*/

.wpcf7-form {
  margin: 0;

}

.x-pricing-column h2 {
    background-color: #fbfbfb;
    font-size: 3.2rem;
    line-height: 1.1; 
}
.x-pricing-column h2 span {
    color: #000;
    font-size: 1.3rem;
}
.x-pricing-column-info ul > li {
    font-size: 2rem !important;
    line-height: 1.4 !important; color: #000000;
}
.x-pricing-column-info ul > li:nth-child(2n+1) {
    background-color: #ffffff;
}

body .x-pricing-column h2 {
  font-size: 35px;
  color: #000;
}
.page-id-192 .x-li-icon i {
    display: none;
}

.custom-class-item-10 .x-feature-box-title {
color: #ffffff;
}

.widget:before {
content: none !important;
}

footer.x-colophon.top {
background-color: #292a2c;
padding-top: 45px;
padding-bottom: 50px;
}
.desktop .sub-menu a {
font-weight: normal; font-size: 16px; !important;
}

.ninja-forms-form-wrap .field-wrap,
#ninja_forms_required_items {
  margin: 0px 0; font-size: 20px
}
h2, .h2 {
 font-size: 25px; 
}

.x-accordion-heading .x-accordion-toggle:before{
float:right;

}
.x-accordion-heading .x-accordion-toggle.collapsed:before{
color:#7b7b7b;
}
.x-accordion-heading .x-accordion-toggle.collapsed{
background-color: #fff;
color:#000;
}
.x-accordion-heading .x-accordion-toggle:hover {
    color: #000000;
}

.x-accordion-heading .x-accordion-toggle:hover:before {
    color: #000;
}
.x-accordion-heading .x-accordion-toggle{
    color: #000;
    background-color: #ededed;
}
.x-accordion-group{
    margin: 0;
    border-bottom: 1px solid #ededed;
}
.x-accordion-heading .x-accordion-toggle:before{
  color: #7b7b7b;/*Color for Down arrow*/
}

@media (min-width:979px){
footer .x-column.x-1-4 {
    width: 15%;
}
footer .x-column:first-child {
    width: 39%;
    border-left: 1px solid #838383;
    border-right: 1px solid #838383;
}
footer .x-column:first-child .textwidget img {
    margin: 0 auto;
    display: block;
    float: none;
}

ul.sub-menu li {border-bottom: 1px solid #3e3f41;}
ul.sub-menu li {padding-bottom: 5px; padding-top: 5px;}
ul.sub-menu li:last-child {border-bottom: 0; border-top: 0;}

.x-colophon .x-nav li a {
font-size: 15px;
}
.x-colophon.bottom .x-nav li a:after {
    content: "  ";
    position: relative;
    left: 8px;
}
.x-colophon.bottom .x-nav li:last-child a:after {
    content: "";
    left: 0;
}
body .x-colophon a {
     text-decoration:none !important;
}
.x-colophon.bottom .x-nav li:after {
  content: '';
}
.x-colophon-content {
    position: relative;
    top:4px;
}
footer.x-colophon.bottom {
padding-top:12px !important;
}
footer.x-colophon.bottom {
padding-bottom: 4px !important;
}

body .x-navbar ul.sub-menu li a {
    font-size: 18px; font-family: lato; font-weight: ultra light
}
.menu-item a i {
	font-size: 1.1em;
}
  p {
    margin: 0;
}
ul.sub-menu li {padding-left: 25px; padding-right: 25px;}
  .x-navbar .sub-menu {
padding:1px!important;
}
.x-navbar .sub-menu li a {
padding: 0em!important;
}
  
  
  .x-feature-box-title {
  font-family: open sans;
}
     .x-logobar {
background-color: #222427;
}
      .x-navbar {
background-color: #222427;
}
  footer.x-colophon.top {
background-color: #222427;
    }
  .x-colophon.bottom {
  background-color: #1d1d1d;
}
.content-cp_id_2ebc0 .cp-form-container .cp-form-field button, 
.content-cp_id_2ebc0 .cp-form-container .cp-form-field input,
.content-cp_id_2ebc0 .cp-form-container .cp-form-field input[type="email"], 
.content-cp_id_2ebc0 .cp-form-container .cp-form-field select, 
.content-cp_id_2ebc0 .cp-form-container .cp-form-field textarea {
    padding: 5px !important;
    max-height: 35px;
}
  
  
  @media (min-width:1200px){
.x-subscribe-form fieldset {
  width: 30%;
  float: left;
  margin-right: 10px;
}
.x-subscribe-form .submit {
  margin-top: 0 !important;
  margin-bottom: 0px !important;
}
  
  .x-subscribe-form {
  position: relative;
  width: 80px%;
  max-width: 80% !important;
  margin-top: 0px !important;
}

.fieldset {
  border: 0;
  display: inline-block;
  width: 48%;
  float: left;
  margin-right: 1%;
  margin-bottom: -20px;
}
    .x-subscribe-form input[type="submit"] {
    padding: 18px;
    margin-top: 0;
    text-shadow: 0px 0px #ffffff;
color: #ffffff;
      font-family: font-family: 'Open Sans' Open Sans;
      font-weight: normal;
  
    }
    .x-recent-posts a {border:none;}
     }
  

  
  
  
  
  
  
   .x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: #ffffff;
}
  
  
  .x-btn-navbar.collapsed {
    color: #ffffff;
}

.x-btn-navbar.collapsed:hover {
    color: #ffffff;
}
  
  
  
  
    .masthead-stacked .x-navbar .desktop .sub-menu .sub-menu {
    top: 2px;
}
  
  @media (max-width:  979px) {
	.x-colophon.top .menu li a {
		color: #fff;
	}
}.x-colophon .widget ul li a, .x-colophon .widget ol li a {
    color: #fff !important;
}

[Christopher]

Hi there,

Please find this code and close curly bracket :

@media (min-width:979px){
footer .x-column.x-1-4 {
    width: 15%;
}

It should be :

@media (min-width:979px){
footer .x-column.x-1-4 {
    width: 15%;
}
}

Hope it helps.

[Daniel Eichar]

Yes! Thank you thank you!

[Rahul]

Glad we could help you.

Thanks for using the X Theme.

[Author]

Posts