Docs

[Abd Ur Rehman]

Hi there!

I changed color of mobile button with code.

.x-btn-navbar {
    color: #0C0C0C !important;
    background-color: #f7b926 !important;
  }

It works fine on mobile and iPad screens but on small desktop screens still shows white. How can I change that?

Thanks

[Christopher]

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.

[Abd Ur Rehman]

This reply has been marked as private.

[Thai]

Hi There,

Please find this CSS:

@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}

.x-colophon {
    border-top: 0 !important;
} 
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}

And change to this:

@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}

.x-colophon {
    border-top: 0 !important;
} 
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}
}
.x-btn-navbar {
	color: #0C0C0C !important;
	background-color: #f7b926 !important;
}

Hope it helps 🙂

[Abd Ur Rehman]

This reply has been marked as private.

[Friech]

Hi There,

You’re not closing your @media query. And it looks like you duplicate it two times. Please look for this entire block:

@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}

.x-colophon {
    border-top: 0 !important;
} 
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}
@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}

.x-colophon {
    border-top: 0 !important;
}
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}
  @media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}

.x-colophon {
    border-top: 0 !important;
}
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}
}
.x-btn-navbar {
	color: #0C0C0C !important;
	background-color: #f7b926 !important;
}

And update that to this:

/*START OF @MEDIA QUERY 767px*/
@media (max-width: 767px) {
.x-topbar .p-info {
    background-color: #0c0c0c !important;
}
.x-colophon {
    border-top: 0 !important;
} 
  .wpcf7-not-valid-tip {
    font-size: 10px !important;
}
}
/*END OF @MEDIA QUERY 767px*/
.x-btn-navbar {
	color: #0C0C0C !important;
	background-color: #f7b926 !important;
}

As you can see your code to change the mobile button color is now outside the @media, so it will take effect the time the mobile button shows up. Unlike when it was inside the @media (max-width: 767px) it will only trigger when the page is viewed on 767px screen and smaller.

Hope it helps, Cheers!

[Abd Ur Rehman]

This reply has been marked as private.

[Friech]

Hi There,

I did go ahead and resolve the issue, see the gray part on your custom CSS. That was the duplicate I’m talking about, I just commented it out. You can remove that if you want.

Please clear your browser’s cache before previewing the page so you can see the changes.

Cheers!

[Abd Ur Rehman]

Thanks Friech, I didn’t get notice of that. Yep, now it’s working.

Regards,

Abd Ur Rehman

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts