Mobile Menu Dropdown Text Color (Ethos 1) – Themeco Community

Mobile Menu Dropdown Text Color (Ethos 1)

murraymillion — Thu, 23 Apr 2015 19:41:55 +0000

We referred to this thread which worked well for our icons: https://theme.co/x/member/forums/topic/mobile-menu-dropdown-icon-colour/

We need the mobile version dropdown menu text to be blue instead of the default color because while the menu is there, it looks invisible. Is there a way to change color for the navmenu text?

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

Prasant Rai — Thu, 23 Apr 2015 23:58:03 +0000

Hello There,

Thanks for writing in!

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

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

Note: Change the color code as per your requirement.

Hope that helps.

Thanks.

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

murraymillion — Fri, 24 Apr 2015 00:55:00 +0000

Thanks! That works, of course 🙂

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

Friech — Fri, 24 Apr 2015 02:26:52 +0000

Glad we could help, Cheers!

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

murraymillion — Fri, 24 Apr 2015 15:30:06 +0000

We did run into a complication regarding the mobile mega-menu submenu dropdown color.

Screenshot: http://imgur.com/ICQgapW

The first part is transparent with with colored text, the submenu is the same as the desktop version color. The desktop coloring would actually be better, it is much easier to see except there is no text. Ideally the mobile menu to be consistent, not two different colors.

Any advice?

Thanks!

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

murraymillion — Fri, 24 Apr 2015 18:19:12 +0000

This reply has been marked as private.

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

Friech — Fri, 24 Apr 2015 22:12:11 +0000

Hi There,

You make the mobile submenu transparent by adding the below code on custom css

@media (max-width:  979px) {
	.x-navbar .sub-menu {
		background-color: transparent;
	}
}

Maybe you might need to change the text color to something darker so it would be more visible.

Cheers!

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

murraymillion — Mon, 27 Apr 2015 16:17:12 +0000

We implemented the code to match the mobile submenu transparency, and that worked. The result is still blending too much with the background, we need a way to make the mobile navigation menu to match the desktop styling which is a dark blue color, so that it is more readable. Also we are thinking that the mobile submenu would be better if it was disabled, if that’s possible…

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

John Ezra — Mon, 27 Apr 2015 19:50:11 +0000

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar-inner {
    background: #06122a;
}

ul#menu-navigation-1 li a{
    color:#888888!important;
}

ul#menu-navigation-1 li a:hover{
    color:#ffffff!important;
}

To hide submenu in mobile, you can use this:

ul.sub-menu.sm-0,
ul.sub-menu.sm-1,
ul.sub-menu.sm-2,
ul.sub-menu.sm-3 {
    display:none;
}

i.x-icon.x-icon-angle-double-down:before {
    display:none;
}

Hope this helps – thanks!

Reply To: Mobile Menu Dropdown Text Color (Ethos 1)

John Ezra — Mon, 27 Apr 2015 19:50:13 +0000

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar-inner {
    background: #06122a;
}

ul#menu-navigation-1 li a{
    color:#888888!important;
}

ul#menu-navigation-1 li a:hover{
    color:#ffffff!important;
}

To hide submenu in mobile, you can use this:

ul.sub-menu.sm-0,
ul.sub-menu.sm-1,
ul.sub-menu.sm-2,
ul.sub-menu.sm-3 {
    display:none;
}

i.x-icon.x-icon-angle-double-down:before {
    display:none;
}

Hope this helps – thanks!