Mobile Menu Colours

• 

  sillygoos3 · Member · Nov 12, 2020 at 12:39 pm

  • Copy link
  • Add topic to favorites

  Hi,

  So on my site (charlespstewart.com), all the colours are correct for the desktop version of the site. However, on mobile, the dropdown menu is still in the default red whilst the background is black, with the close menu button also red with white text.

  I am looking for some CSS that will let me:

  1) Change the colour of the 3 horizontal lines signifying the drop down mobile menu from red to a custom colour.

  2) change the mobile menu background colour from default to a custom colour

  3) change the exit menu (red X) from default colour to custom colour

  4) change the text colour from default to a custom colour

  Is this possible? I am on the arcane theme.

  Thanks!

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

• 

  staff-cara · Staff · Nov 12, 2020 at 5:05 pm

  • Copy link

  Hi @charles1stewart,

  Try adding these to your custom CSS:

  /* Mobile Menu and Exit Menu */
  .toggle-menu-wrapper a, .toggle-menu-wrapper a:visited, .site-primary-menu-responsive .primary-menu-responsive-close, .site-primary-menu-responsive .primary-menu-responsive-close:hover {
    color: black;
  }
  
  /* Mobile Menu Background */
  div.site-primary-menu-responsive {
    background-color: grey;
  }
  
  /* Mobile Menu Text Colour */
  .primary-menu-responsive>li.current_page_item>a, .primary-menu-responsive a, .primary-menu-responsive a:visited {
    color: black;
  }

  Of course, feel free to change the colors in the code. :)

• 

  sillygoos3 · Member · Nov 12, 2020 at 5:16 pm

  • Copy link

  That is exactly what I was looking for staff-cara thank you for your help!

• 

  staff-cara · Staff · Nov 12, 2020 at 5:22 pm

  • Copy link

  No problem! Glad it worked out.

• 

  kokkieh · Staff · Nov 13, 2020 at 6:28 am

  • Copy link

  Hi there,

  Just for future reference, your plan gives you access to both live chat and direct email support for help with questions like this. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact