Changing Colors of Menu-Toggle Close Button

  • 1) How can I change the background color of Menu close button (https://snag.gy/jaVXr.jpg) on growthgravy.com mobile site to green or white?

    2) On desktop menu close button gets camouflaged and comes back only when a mouse is hovered: https://snag.gy/Emy7L.jpg

    I’ve used the following code: 

    .hero a.button-minimal {
    border-color: #009688;
	background-color: #009688;
}

.hero a.button-minimal:hover {
    border-color: #00897B;
	color: #fff;
	background-color: #00897B;
}

a.button-minimal {
	color: #fff;
}
a.button, a.button-minimal {
	background: #009688;
	border-color: ;
}
a.button-minimal:hover,
a.button-minimal:focus,
a.button-minimal:active  {
	background: #00897b;
	border-color: #00897b;
}

.navigation-wrapper {
    background: #009688;
}

.menu-toggle:hover, .menu-toggle:active {
color: #009688;
}

    3) How can I change the color of the Read more links to blue?

    4) Why is there no space below the text widget on the mobile site, how can I add it? (Reference: https://snag.gy/4bKgg.jpg)

    5) How Do I add text in the services above the image only on the mobile site as it doesn’t look great: https://snag.gy/Aw4AR.jpg

Viewing 1 replies (of 1 total)

  • Hi there!

    1 & 2. For the button that closes your menu, the following CSS will change the colors:

    .menu-toggle:hover:before,
.menu-toggle:active:before,
.menu-toggle.open:before,
.menu-toggle.open {
color: orange;
}

.menu-toggle:hover:before,
.menu-toggle:active:before,
.menu-toggle.open:before {
background: blue;
border-color: red;
}

    Here’s a screenshot of what each one does:
    mobile – https://cloudup.com/cfsFBX0LioR
    desktop – https://cloudup.com/cOaqcrs2pPp

    Adjust the orange, red, and blue as needed. I made the colors really obvious and different so you can pick them out and change them to whatever color works best for each piece on your site. ??

    3. To adjust the Read More link text, add this CSS: 

    a.more-link {
	color: red;
}

    4. The image is no longer there, so I can’t see the example. Can you describe/link again?

    5. I’m not sure where you mean or what you are wanting to adjust on this one. Can you explain in more detail where you mean to add text?

    Also, be sure when adding CSS you’re not editing the theme files directly, as you will lose your customizations each time the theme updates. Since you’re using the Jetpack plugin, you could activate the Custom CSS module and use that to add your CSS.

Viewing 1 replies (of 1 total)
  • The topic ‘Changing Colors of Menu-Toggle Close Button’ is closed to new replies.

Tags