Support » Theme: Scrawl » Menu-Icon: change colour (and Icon, if possible)

  • I’m trying to change the colour of the menu-button using css, but haven’t been able to. I’ve been using variations of the folllowing code:

    .menu-toggle { color: #7a0000; }

    Anybody help out with this?

    (Also, can the icon itself be changed, using Dashicons, or the like?)

    With thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath


    Automattic Happiness Engineer

    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
    Thread Starter zer0blok


    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:

    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;




    Automattic Happiness Engineer

    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;
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu-Icon: change colour (and Icon, if possible)’ is closed to new replies.