Docs

[TPL99]

Hi,
Searching through the forum I figured out how to change the navbar color with custom CSS. Then I changed the navbar font color in the customizer settings. However, the dropdown menus from the navbar did not change, but the font colors did, so then I had white font on white dropdowns, ie invisible.

Is there a way to control the colors of all of these things together with CSS?

thanks

[TPL99]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-navbar .desktop .sub-menu a {
    color: red;
}
ul.sub-menu {
    background-color: #000 !important;
}

Hope it helps.

[TPL99]

THANKS. That worked. Great Theme!

[Prasant Rai]

You are most welcome. 🙂

[TPL99]

Whoops. I noticed that now the changes make the navbar unreadable on mobile. The font color changes translate to mobile, but not the color of the navbar. So now the navbar is white font on white in mobile, thus unreadable…

[Joao]

Hi There,

To adjust the colors on mobile please add the following code at your customizer/custom CSS

.x-navbar .mobile .x-nav li > a {
color: red !important;
}

.x-navbar .mobile .x-nav li > a:hover {
color: red !important;
}

You can chande the red for the desired color lie : #ffffff or black

Hope that helps!

Thanks,

Joao

[TPL99]

Hi, I added that code in the custom CSS but it did not fix the problem. Currently my mobile navbar is unreadable.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-navbar .mobile .x-nav li > a {
    color: #D11919 !important;
}

Please change color code as per your choice.

Thanks.

[TPL99]

Hi, That’s the same code that he already suggested above that didn’t work for me… I put that code at the end of the CSS in customizer. Does it need to go somewhere in particular in there? It is not working currently and my menu is unreadable in mobile view.
Please help.

[Thai]

Hi There,

You forgot to add the closing bracket(}) in your custom CSS.

Please replace your current CSS with this:

.x-brand.img img {
	width: 100%;
}
.wpcf7 {
	background-color: #DDB54B;
	border: 2px solid #000;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 0px;
	font-family: helvetica;
	color: #0000;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	background-color: #ffff;
	border: 1px solid #000;
	color: #000;
	width: 100%;
	font-family: helvetica;
	color: #0000;
}

.wpcf7 input:hover[type="text"],
.wpcf7 input:hover[type="email"],
.wpcf7 input:hover[type="tel"],
.wpcf7 textarea:hover {
	background-color: #ffff;
	border: 2px solid #2237f7;
	color: #000;
	width: 100%;
	font-family: helvetica;
}

.wpcf7-form .wpcf7-submit {
	float: right;
	width: 60%;
	height: 30px;
	margin: 30px 5;
	padding: 3px;
	color: #fff;
	font-family: "Open Sans";
	background-color: #000000;
}

.wpcf7-form input:hover[type="submit"] {
	background-color: #c13f1f;
}

h1,.h1 {
	font-size: 180%;
}

h2,.h2 {
	font-size: 150%;
}

h3,.h3 {
	font-size: 130%;
}

h4,.h4 {
	font-size: 130%;
}

h5,.h5 {
	font-size: 110%;
}

h6,.h6 {
	font-size: 100%;
	text-transform: none;
	font-weight: normal;
	color: #CCCCCC;
}

/*
.x-navbar {
background-color: #01467a;
}
*/

.x-colophon {
	background-color: #000000;
}

.x-colophon a {
	color: #ffffff;
}

.x-topbar .p-info {
	color: white;
	font-family: "lato";
	font-size: 18px;
}

.x-topbar {
	background-color: black;
}

@media (max-width: 767px) {
	.x-topbar .p-info {
		background-color: transparent;
	};
}

.contain-custom {
	border-width: 5px;
	border-style: solid;
	border-color: #DDB54B;
	background-color: #1f2d4f;
	color: #FFFFFF;
	font-size: 125%;
	font-weight: 100;
}

.x-btn p {
	margin-bottom: 0;
}

@media(min-width: 980px) {
	.masthead-stacked .x-brand {
		float: left;
	}

	.x-column > p:last-child {
		margin-bottom: 0px;
	}

	.custom-text.right.pas {
		text-align: right;
	}

	span.phone-number {
		font-size: 24px;
	}

	.x-navbar .desktop .sub-menu a {
		color: white;
	}

	ul.sub-menu {
		background-color: #000000 !important;
	}

	.x-navbar {
		background-color: #000000;
	}

	.x-navbar .mobile .x-nav li > a {
		color: black !important;
	}

	.x-navbar .mobile .x-nav li > a:hover {
		color: black !important;
	}
}

.x-navbar .mobile .x-nav li > a {
	color: red !important;
}

.x-navbar .mobile .x-nav li > a:hover {
	color: #fff !important;
}

Hope it helps 🙂

[TPL99]

thanks, I got it working now with the bracket.

[John Ezra]

You’re most welcome!

[TPL99]

Hi, Thanks for all your help. The color changes worked great!

However, now I don’t know what to do with some other font text problems. For instance, on my home page I have white font in the first section. Now, I want to make that text link to other pages, but when I make the text link in cornerstone it overrides the white font and makes the font black with a blue hover (which is my universal font and hover style). However, I want to keep this font white and make it yellow when hovered over… any advice?

Also, on a another page I added in similar white text in the top section. I want all that font to be H2 size. I thought I had it all set up and it looks perfect when I view it in cornerstone. But when I view the actual page outside of my wordpress portal, some of the text is not white and not H2. Any advice?

thanks.

[TPL99]

This reply has been marked as private.

[Author]

Posts