[IngemarBParticipant]

Hi,

I can’t figure it out after searching and applied several codes to add to customizer>custom>CSS.
I am using Ethos stack. Using the latest version of wordpress, X-theme and cornerstone. The mobile icon menu button in the mobile version has a ajusted color against a dark background.
These are my questions and I hope you will have the correct CCS code for me;

-I would like to change the color of the mobile icon menu button to a lighter color instead of the gold color.

-When clicking the mobile menu icon menu button the color changes to a azur blue color, just a short while by clicking.I wpould like to change this color.

-When clicking the pages within the mobile menu the background changes to this same azur blue color, just a short while by clicking. I wpould like to change this color.

This is my CSS code sofar;

body {
background: #FFFFFF !important;
}
h1, .h1 { font-size: 20px !important; }
h2, .h2 { font-size: 17px !important; }
h3, .h3 { font-size: 20px !important; }
h4, .h4 { font-size: 15px !important; }
h5, .h5 { font-size: 20px !important; }
.gm-style-iw {
color: #544700;
}
.x-btn-navbar.collapsed {
color: #544700;
}
.x-btn-navbar.collapsed:hover {
color: #544700;
}
.x-btn-navbar {
color: #544700;
}
.x-btn-navbar:hover {
color: #544700;
}
.x-post-carousel-meta .entry-cover-author {
display: none;
}
.x-post-carousel-meta .entry-cover-date {
display: none !important
}
.x-post-carousel .entry-cover-date{
display:none !important
}
.blog .x-slide .featured-meta {
display: none;
}
.entry-cover:hover .h-entry-cover:before,
.h-entry-cover:before {
background-color: #f5f5f5;
opacity: 0.4;
}
.h-entry-cover {
color: #544700;
}

.x-post-carousel-meta>span {
color: #1d68c4;
}

.x-logobar {
border-bottom: medium none;
}

.x-navbar .desktop .x-nav>li>a {
border: none !important;
}
a:focus,
a.x-btn:focus,
select:focus,
input[type=”file”]:focus,
input[type=”radio”]:focus,
input[type=”submit”]:focus,
input[type=”checkbox”]:focus,
input[type=”button”]:focus {
outline: none !important;

Hope you can help me out.

Sincerely,
Ingemar

[JadeModerator]

Hi Ingemar,

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.

[IngemarBParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS:

.x-btn-navbar, .x-btn-navbar.collapsed {
    color: red !important;
}

.x-btn-navbar:hover, .x-btn-navbar.collapsed:hover {
    color: blue !important;
}

Also make sure to close the code you have already:

a:focus,
a.x-btn:focus,
select:focus,
input[type=”file”]:focus,
input[type=”radio”]:focus,
input[type=”submit”]:focus,
input[type=”checkbox”]:focus,
input[type=”button”]:focus {
outline: none !important;

for >

a:focus,
a.x-btn:focus,
select:focus,
input[type=”file”]:focus,
input[type=”radio”]:focus,
input[type=”submit”]:focus,
input[type=”checkbox”]:focus,
input[type=”button”]:focus {
outline: none !important;
}

Hope that helps

Joao

[IngemarBParticipant]

Hi Joao,

Sorry, that doesn’t work. The desktop version is (and was) perfect. It’s only the mobile version.
The mobile menu button stays in color gold, and clicking the menu button a turquoise color shows. Also when the menu is opened, you see a dark grey background color, and almost black button background color.
When a button is clicked the almost black background color gets the same turquoise color.
I prefer to get rid of this turquoise color and change it to another color that matches my theme layout.

Regards,
Ingemar

[Nabeel AModerator]

Hi again,

I can’t see the turquoise color while checking your Mobile menu, can you please share some screenshots so we can take a closer look?

Thanks!

[IngemarBParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Sorry, I get a different color scheme of your mobile menu on my end.

This is the same colour that you have on the desktop menu which it should. Please clear your browser’s cache and please clarify how do you want your mobile menu look.

Thanks.

[IngemarBParticipant]

Hi,

Now the menu icon button color is solved. Thank you!
What remains is:
The color scheme on your printscreen is correct, but clicking for instance the button accommodaties the background flashes into a turquoise color of which I have send a printscreen.I prefer that color to be as it is now almost black.
Thanks sofar!

[JoaoModerator]

Hi There,

I have tested your website on my Android phone and I could not replicate the issue, I also inspected your code and could not find anything related to that.

Would you mind trying cleaning your browser cache or trying a different browser on your mobile and let us know if the issue persists?

Thanks

Joao

[IngemarBParticipant]

Hi Joao,

Thanks for all the help. I always clean browser cash on mobile and within wordpress when I change things. The problem appears to exist in the normal Google browser as well in Google Chrome.
I have tried Firefox Mozilla on my phone and there is everything okay!
But most of the people use Google or Google Chrome, so that’s a pitty.
I hope to provide enough information, maybe you have another solution. The used phones are Samsung S5.

Regards,
Ingemar

[FriechModerator]

Hi There,

Add this on your custom CSS on Customizer.

.x-navbar .mobile .x-nav li>a {
	background-color: rgba(0,0,0,0.1) !important;
}

Thanks.

[IngemarBParticipant]

Hi Friech,

I’ve added the code and cleared cash, but it doesn’t work.

Regards,
Ingemar

[RadModerator]

Hi there,

Been trying but I can’t replicate it. Is it the blue background? Your screenshots seems a bit different due to lightings and camera quality.

Please try this,

.x-navbar .mobile .x-nav li>a,
.x-navbar .mobile .x-nav li>a:focus,
.x-navbar .mobile .x-nav li>a:active,
.x-navbar .mobile .x-nav li>a:hover {
    background-color: rgba(0,0,0,0.1) !important;
}

Thanks!

[IngemarBParticipant]

This reply has been marked as private.

[Author]

Posts