Sub-menu on mobile changes color when being clicked on

Anh Tu Nguyen

So I have the menu on mobile set up as white on transparent background. But whenever I click to show the submenu it changes into black. See photo below

Another question is how to indicate a submenu clearer. Right now it's a small, insignificant black plus sign on the right.

Thank you in advance.

Hikin' Mike

Add this to your theme's custom CSS section:

/*
* Changes Mobile Sub-nav Text
*************************************/
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-emphasized .sm-accordion-item-label {
  color: white;
}

Anh Tu Nguyen

@Hikin' Mike said:
Add this to your theme's custom CSS section:

/*
* Changes Mobile Sub-nav Text
*************************************/
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-emphasized .sm-accordion-item-label {
  color: white;
}

Thank you Mike. I added it to the theme's CSS but nothing changes https://www.tunguyenwedding.com/About-Us

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike. I added it to the theme's CSS but nothing changes https://www.tunguyenwedding.com/About-Us

Try adding the !important tag:

/*
* Changes Mobile Sub-nav Text
*************************************/
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-emphasized .sm-accordion-item-label {
  color: white !important;
}

Hikin' Mike

Just to add, use this instead. The code above also makes some of the background white text, white.

/*
* Changes Mobile Sub-nav Text
*************************************/
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-emphasized .sm-accordion-item-has-children .sm-accordion-item-label {
  color: white !important;
}

Anh Tu Nguyen

It works now thank you so much Mike.

Anh Tu Nguyen

Also, do you know how to make the plus sign (indicating a sub nav) bigger / to the left? (Currently it's on the left and pretty small and not easy to notice)

Anh Tu Nguyen

another question: how to make the mobile menu when clicked on the hamburger icon bleeding the full phone width instead of half the width like the photo below?

Hikin' Mike

@Anh Tu Nguyen said:
another question: how to make the mobile menu when clicked on the hamburger icon bleeding the full phone width instead of half the width like the photo below?

Find this:

@media only screen and (max-width: 600px) {
  .sm-user-ui .sm-page-widget-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}

Add width: 100%;

Hikin' Mike

@Anh Tu Nguyen said:
Also, do you know how to make the plus sign (indicating a sub nav) bigger / to the left? (Currently it's on the left and pretty small and not easy to notice)

/**
* Increases '+' Sign on Mobile
******************************************************/
.sm-user-ui .sm-accordion-item-action .sm-fonticon-small {
  font-size: 30px;
  font-weight: bold;
  color: white;
}

Anh Tu Nguyen

@Hikin' Mike said:

@Anh Tu Nguyen said:
another question: how to make the mobile menu when clicked on the hamburger icon bleeding the full phone width instead of half the width like the photo below?

Find this:

@media only screen and (max-width: 600px) {
  .sm-user-ui .sm-page-widget-nav {
    position: absolute;
    top: 0;
    right: 0;
  }
}

Add width: 100%;

Thank you Mike it worked - the only issue is the text "Menu" was moved to the center. How do I put it back right under the hamburger icon?

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike it worked - the only issue is the text "Menu" was moved to the center. How do I put it back right under the hamburger icon?

This should work. Had to add a little margin-right so it will stay in the same place as before.

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
  text-align: right;
  margin-right: 1rem;
}

Anh Tu Nguyen

@Hikin' Mike said:

@Anh Tu Nguyen said:
Thank you Mike it worked - the only issue is the text "Menu" was moved to the center. How do I put it back right under the hamburger icon?

This should work. Had to add a little margin-right so it will stay in the same place as before.

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
  text-align: right;
  margin-right: 1rem;
}

works like a charm. Thanks Mike!