Change accent color for mobile only

• 

  nerdyneen · Member · Nov 19, 2017 at 4:26 am

  • Copy link
  • Add topic to favorites

  Hi –

  I’m trying to change the navigation bar color for the mobile view. For some reason, the navigation bar is black on my desktop but when I go to mobile it is green. I’d like it to be black on mobile as well. Is this something I can fix with CSS code?

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

• 

  chingboon · Member · Nov 19, 2017 at 7:15 am

  • Copy link

  Hi,

  I will be glad to point out what is causing this:

  .masthead .branding {
     background-color: #1f841f;
  }

  On smaller device you have this:

  @media only screen and (max-width: 782px) {
  .masthead .branding {
      position: relative;
      top: 0;
      left: 0;
      right: auto;
      background: #FFEE00;
  }
  }

  ————————————————–
  One possible solution might be to set both background color to black

  .masthead .branding {
     background-color: #000000;
  }
  
  @media only screen and (max-width: 782px) {
  .masthead .branding {
      position: relative;
      top: 0;
      left: 0;
      right: auto;
      background: #000000;
  }
  }

• 

  nerdyneen · Member · Nov 19, 2017 at 2:39 pm

  • Copy link

  This worked! Thank you so much! :-)

• 

  chingboon · Member · Nov 20, 2017 at 1:44 am

  • Copy link

  No problem, glad to help :)