CSS Sela desktop and mobile

• 

  zthreestrategy · Member · Feb 7, 2021 at 4:29 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I recently noticed the desktop and mobile versions of my site are not consistent in the drop down navigation. I do have the mobile version of Sela disabled.

  Currently my desktop site has white type on blue but the mobile version shows a gray on blue which is not correct.

  How can I change the CSS to update the mobile to the same style as my desktop site?

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Feb 8, 2021 at 1:52 am

  • Copy link

  Hi there,

  From what I can see you have added some custom CSS to change the menu background color (normally light grey) to blue.

  Because of this the dark grey text that would work against the original background color does not work agains the new blue backround you have set via CSS.

  However, you can add this code snippet, and it will make force the text in the mobile menu to be white so it is visible against blue.

  .menu-toggle,
  .menu-toggle:before,
  .main-navigation ::marker,
  .main-navigation.toggled ul ul a {
      color: #fff;
  }

  Hope this helps!

• 

  zthreestrategy · Member · Feb 8, 2021 at 1:31 pm

  • Copy link

  Yes, I’ve made some changes to the CSS.

  Thank you, that fixed the drop down colors. What will I have to do to fix the “Menu” hover state color? It’s staying gray.

• 

  aleone89 · Staff · Feb 8, 2021 at 3:39 pm

  • Copy link

  Hello there,

  Happy to help you with this.

  You may wish to add this CSS to change the menu toggle present on a mobile:

  /* Change mobile menu toggle */

  button.menu-toggle {
  color: white;
  }

  I hope this helps.

• 

  zthreestrategy · Member · Feb 8, 2021 at 7:01 pm

  • Copy link

  Thank you.

  My previous question was unclear since I was referencing the earlier color issue on my site. I want the normal state for “Menu” to be white and the hover color to be white for the mobile nav.

  It still doesn’t give Menu much affordance but I’m unsure what else I could do to make it readable since a hover invert wouldn’t look right.

• 

  supernovia · Staff · Feb 8, 2021 at 9:55 pm

  • Copy link

  You should be able to choose your colors by adding this code and adjusting the colors as needed. I threw in random colors so it’s more obvious.

  button.menu-toggle, .main-navigation.toggled ul ul, .main-navigation.toggled ul ul a {
  color: yellow;
  }
  
  button.menu-toggle:hover, .main-navigation.toggled ul ul:hover, .main-navigation.toggled ul ul a:hover {
  color: orange;
  }