Drop down menu on mobile site reflect change on website

• 

  loveallgroup · Member · Jun 7, 2016 at 4:47 am

  • Copy link
  • Add topic to favorites

  Hi,

  My drop down menu (color) on my site didn’t reflect the change on my mobile site. It’s currently black on the mobile site and it’s supposed to be #aa5c36. Please advice on how to resolve that.

  Also the three dash icon (menu) and magnify glass icon is white on the mobile site. How would I change that to #777

  Thank you,
  Judy

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

• 

  thesacredpath · Member · Jun 7, 2016 at 5:58 pm

  • Copy link

  Hi Judy, for the menu toggle icon (three bars) and the search icon, the following custom CSS will make it #777

  .menu-toggle::before, #header-search-toggle::before {
      color: #777;
  }

  On the touch device menu, I’m seeing some of your text the same color that you want the background (#aa5c36). This is the CSS to change the background color on the menu items.

  .main-navigation a {
      background: #aa5c36;
  }

  This is the CSS rule in your custom CSS which is controlling the orange-ish color on the menu items.

  .main-navigation ul ul li a {
      color: #aa5c36 !important;
  }

• 

  loveallgroup · Member · Jun 7, 2016 at 6:56 pm

  • Copy link

  Hi Richard,

  I added the codes you suggested and refresh my mobile site but it didn’t seem to make any changes. Can you check to see what I’m doing wrong?

  Thanks!
  Judy

• 

  thesacredpath · Member · Jun 7, 2016 at 7:35 pm

  • Copy link

  Hi, I took a look in your customizer and see this at the very bottom of your custom CSS, which is missing an ending curly bracket and producing a syntax area. Anything added after that will be ignored by the browsers. Remove this line and then paste in the first two rules above and then adjust the colors as you see fit.
  @media screen and (max-width: 800px) {
  When I fixed the syntax error and then pasted in the above in your customizer, it worked.

• 

  loveallgroup · Member · Jun 9, 2016 at 1:20 am

  • Copy link

  Hi Richard,

  Can you check if I did it right?

  It seems like the toggle icon (three bars) and the search icon is fixed (now grey).

  But the drop down menu is still black on mobile? I thought I have the codes in CCS to make it the same colors as the website drop menu?

  Thanks,
  Judy

• 

  thesacredpath · Member · Jun 9, 2016 at 1:23 pm

  • Copy link

  Hi Judy, I don’t see the code in your CSS I gave to change the menu color. I did notice something though, so let’s change it a bit. Add the following.

  .main-navigation.toggled a {
      background: #fffaa7;
  }