[Bradley HParticipant]

Hi there
I just had a question about my customizing the hover of the navigation menu for my site.
I was wondering what code I would use in order to change the colour from black to a different colour. I’d also like to change the middle footer widget to a colour other than black as well. I know I have to click on Customization and then add CSS coding but I don’t know which specific code to use. For reference I’ve provided a link to my website below:
notadoormatanymore.com

Any help with this would be very much appreciated and thank you so much again.
Sincerely
TLaron

[CousettMember]

To change the mobile menu

Try adding add some CSS code under Appearance -> Customize -> Custom -> CSS

.x-btn-navbar.collapsed {
background-color: red;
}

Change “red” for whatever color you are looking for either in its short name or hex value.

To change the widget add this CSS and change red as needed.

div#recent-posts-2 ul {
background-color: red;
}

I hope this helps.

[Bradley HParticipant]

Oh my, this should do fine 🙂 Will try it now. Sorry but I forgot to ask about changing the colour for the text fields of the contact form. I’d like to change the colour of those text fields as well. Sorry about all the bother and thank you so much again.
Sincerely
Tlaron

[Bradley HParticipant]

sorry also I’d like to change the navigation links background color on hover from black to another colour as well. Sorry about all this bother.
So again the
color for the background hover links and the
contact text fields

Thank you so much again
Sincerely
tlaron

[ChristianModerator]

Hey Bradley,

For the form, please add the code below in the Appearance > Customize > Custom > CSS.

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: white;
}

Upon hovering your nav links, we don’t see a black background color. Please check.

Thanks.

[Bradley HParticipant]

Sorry I meant the navigation hover on the mobile menu.
Sorry for the confusion :s

[CousettMember]

No worries!

Try adding add some CSS code under Appearance -> Customize -> Custom -> CSS

@media (max-width: 979px)
.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover {
background-color: red;
}

Change “red” for whatever color you are looking for either in its short name or hex value.

[Bradley HParticipant]

Thanks so much…works perfectly
Just one more thing. The current page link on the mobile nav bar is still black. Just wanted to change that as well and that should be all. WOn’t bother you much again :s So sorry for all this and totally love the Theme. XThemes are the best ones I’ve worked with.

[Nabeel AModerator]

Hi Bradley,

Use this code for removing the black background:

.x-btn-navbar.collapsed:hover {
    background-color: red !important;
    box-shadow: none !important;
    color: #fff !important;
}
.x-btn-navbar {
    background-color: red !important;
}
.x-navbar .x-navbar-inner .x-nav-collapse .x-nav > li > a:hover, .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover, .x-navbar .x-navbar-inner .x-nav-collapse .x-nav > .current-menu-item > a {
    background-color: red !important;
}

Let us know how this goes!

[Bradley HParticipant]

Oh my…worked perfectly.
Thank you so much for all of your help and quick responses.
Sincerely
tlaron 🙂

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Author]

Posts