change background colour for dropdown menu in tablet view

• 

  classicitsupport · Member · Apr 26, 2017 at 8:31 am

  • Copy link
  • Add topic to favorites

  My dropdown menu for ‘Services’ on the primary menu bar has a grey background set. When I view it in tablet view it turns to white. The font is in white so means you can;t read the menu options.
  Thanks for any help with this.

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

• 

  otpidusprime · Member · Apr 26, 2017 at 10:06 am

  • Copy link

  Hello @classicitsupport,
  You can use @media to target screens below 768px(Tablet devices).

  To change the background only on tablet & other mobile devices use this CSS:

  /*for screens below 768px*/
  @media only screen and (max-width: 768px) {
      .main-navigation {
          background: #2e2e2e;   /*change this color if you want*/
      }
  }

  To change the background specifically for tablets only(not mobile phones):

  /*for screens between 768px and 340px*/
  @media only screen and (max-width: 768px) and (min-width: 340px) {
      .main-navigation {
          background: #2e2e2e;   /*change this color if you want*/
      }
  }

  OPTIONAL:
  And to change the color of the menu button along with the background, use this:

  /*for screens below 768px*/
  @media only screen and (max-width: 768px) {
      .main-navigation {
          background: #2e2e2e;   /*change this color if you want*/
      }
  
      .menu-toggle {
          background: #2e2e2e;
      }
  }

  Or this:

  /*for screens between 768px and 340px*/
  @media only screen and (max-width: 768px) and (min-width: 340px) {
      .main-navigation {
          background: #2e2e2e;   /*change this color if you want*/
      }
  
      .menu-toggle {
          background: #2e2e2e;
      }
  }

  Hope this helps 🙂