CSS Customization …Mobile Menu Hover – Themeco Community

CSS Customization …Mobile Menu Hover

Bradley H — Tue, 21 Oct 2014 23:28:53 +0000

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

Reply To: CSS Customization …Mobile Menu Hover

Cousett — Wed, 22 Oct 2014 12:11:12 +0000

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.

Reply To: CSS Customization …Mobile Menu Hover

Bradley H — Wed, 22 Oct 2014 16:42:17 +0000

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

Reply To: CSS Customization …Mobile Menu Hover

Bradley H — Wed, 22 Oct 2014 23:30:50 +0000

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

Reply To: CSS Customization …Mobile Menu Hover

Christian — Thu, 23 Oct 2014 02:27:24 +0000

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.

Reply To: CSS Customization …Mobile Menu Hover

Bradley H — Thu, 23 Oct 2014 03:17:13 +0000

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

Reply To: CSS Customization …Mobile Menu Hover

Cousett — Thu, 23 Oct 2014 12:56:46 +0000

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.

Reply To: CSS Customization …Mobile Menu Hover

Bradley H — Thu, 23 Oct 2014 17:56:59 +0000

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.

Reply To: CSS Customization …Mobile Menu Hover

Nabeel A — Thu, 23 Oct 2014 21:23:48 +0000

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!

Reply To: CSS Customization …Mobile Menu Hover

Bradley H — Thu, 23 Oct 2014 23:27:03 +0000

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