Menu-Icon: change colour (and Icon, if possible)

Hi there, I’m not seeing a menu toggle on your site right now, but working off the Scrawl demo site, I came up with this. The first sets the color of the three bars, which as done in a different way, so the color is set as a background. The menu toggle also has a 0.25 opacity setting which makes it look a bit faced. In the second CSS rule, you can adjust that .25 opacity as desired if you wish. The closer to 1, the more opaque. When you hover over it, it goes to a full opacity of 1.

.menu-toggle .lines, .menu-toggle .lines::before, .menu-toggle .lines::after {
  background: #7a0000;
}
.menu-toggle {
  opacity: .25
}

Hi @sacredpath,

Sorry about the site address, it was the wrong one! -although it’s exactly the same theme, just without menu-bar. The correct site is: https://www.mrathephotographer.com/

The code has worked. Thanks ??

> Is it possible to control the hover-behaviour of the icon, in the same way that the site-title behaves? I use this css for the site-title:

/*****Site Title Color******/

.site-title a {
    color: #8A0808;
    opacity: 1.0;
}

/* Site Title Hover Color */

.site-title a:hover {
    color: #0489B1;
    opacity: 1;
    transition: .2s opacity ease-in-out;
}

??

To have the menu toggle the maroon and then switch to the blue when hovered, change the color in the rule I had give you to the maroon and then add this.

.menu-toggle:hover .lines, .menu-toggle:hover .lines::before, .menu-toggle:hover .lines::after {
    background: #0489b1;
}