Navigation side panel button and Social media Icons colors

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 5:13 am

  • Copy link
  • Add topic to favorites

  Hello

  I was trying to change my website’s color palette to dark colors, but then I noticed that on my mobile the navigation side panel button is in black, it doesn’t change as the color changes.

  Same goes for the social media buttons on desktop.
  How can I fix this through the additional css?

  My website is: https://rafiqmahfouz.com/

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

• 

  aleone89 · Staff · Jan 5, 2021 at 10:59 am

  • Copy link

  Hello there,

  With regards to the mobile menu toggle, you would require quite a bit of CSS to change this.

  The reason being is that the menu toggle uses this image:

  https://s0.wp.com/wp-content/themes/premium/gema/assets/images/menu-bars.svg

  If you’re able to make your own image based on the above, and uploaded to your media library, we may be able to help you via https://wordpress.com/help/contact with that CSS.

  Just to check with regards to the social media icons, are you referring to the icons that appear at the bottom of posts?

  Please not that the site would need to be on the premium plan or higher for custom CSS.

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 1:19 pm

  • Copy link

  I uploaded it to: https://rafiqmahfouz.files.wordpress.com/2021/01/menu-bars.png

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 1:28 pm

  • Copy link

  By social media icons, I mean the ones appear on home below the navigation options.

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 1:32 pm

  • Copy link

  Sorry I uploaded the button here:
  

• 

  aleone89 · Staff · Jan 5, 2021 at 3:38 pm

  • Copy link

  Many thanks for providing that information there.

  To change the menu icon, the CSS you would require is:

  
  /* Change mobile menu icon img */
  
  .menu-toggle.menu-open:before {
      background: url(https://rafiqmahfouz.files.wordpress.com/2021/01/blue-1.png) no-repeat center center;
      background-size: auto 30px;
      content: "";
      display: block;
      height: 60px;
      width: 60px;
  }
  

  The CSS you would require for the social media icons is:

  
  /* Change social menu colour */
  
  .is--ie-le10 .jetpack-social-navigation.jetpack-social-navigation ul a:before {
      color: #24455a;
  }
  

  Let us know if we can be of any further assistance.

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 4:05 pm

  • Copy link

  It worked perfectly!

  There’s another icon I forgot about other side menu button, it appears inside the article pages on mobile, What the link for that one and the css name?

• 

  staff-blorbo · Staff · Jan 5, 2021 at 5:49 pm

  • Copy link

  For that one, try:

  .overlay-toggle.sidebar-toggle.sidebar-open ul a:before {
      color: #24455a;
  }

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 6:19 pm

  • Copy link

  it is uploaded as an image too? ’cause the code didn’t work.
  If it’s an image what’s the link for it so I can modify it?

• 

  staff-blorbo · Staff · Jan 5, 2021 at 6:44 pm

  • Copy link

  Oh, sorry, yes that is, so the same as my colleague provided above should work for .overlay-toggle.sidebar-toggle.sidebar-open:before with the new button.

  If not, please let us know!

• 

  rafiqmahfouz · Member · Jan 5, 2021 at 6:55 pm

  • Copy link

  What’s the original link for the toggle img?

  I mean like this one:
  https://s0.wp.com/wp-content/themes/premium/gema/assets/images/menu-bars.svg

• 

  staff-blorbo · Staff · Jan 5, 2021 at 7:27 pm

  • Copy link

  Oh dear, yes the coffee is kicking in finally, sorry about that!

  The original image is https://s0.wp.com/wp-content/themes/premium/gema/assets/images/sidebar-icon.svg and it’s flipped horizontally via CSS.