Docs

[murraymillion]

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?

[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: #A64F4F !important;
  }

Note: Change the color code as per your requirement.

Hope that helps.

Thanks.

[murraymillion]

Thanks! That works, of course 🙂

[Friech]

Glad we could help, Cheers!

[murraymillion]

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!

[murraymillion]

This reply has been marked as private.

[Friech]

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!

[murraymillion]

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…

[John Ezra]

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!

[John Ezra]

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!

[Author]

Posts