Navigation side panel button and Social media Icons colors
-
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)
-
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.
-
-
-
-
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.
-
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?
-
For that one, try:
.overlay-toggle.sidebar-toggle.sidebar-open ul a:before { color: #24455a; } -
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? -
Oh, sorry, yes that is, so the same as my colleague provided above should work for
.overlay-toggle.sidebar-toggle.sidebar-open:beforewith the new button.If not, please let us know!
-
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 -
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.
- The topic ‘Navigation side panel button and Social media Icons colors’ is closed to new replies.
